A collapsible section hides content until a visitor clicks a button to expand it. This lets you include supporting detail, such as FAQs or fine print, without crowding the page.
Use collapsible sections for content visitors need, not to add more copy. Too much content can lower conversions.
This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. Test it on a published page before relying on it, and work with a developer if you aren't comfortable editing HTML, JavaScript, and CSS.
The script supports one collapsible section per page. Using it on more than one section can cause problems.
Add the collapsible section
The script is hosted on GitHub as collapsible_section.js.
- Add a new page section with the content you want to collapse.
- Place the content inside a box element.
- Add a button element that visitors click to show or hide the section.
- Copy the script from the gist and add it to the JavaScripts section.
- In the script, replace the example element IDs with the IDs of your section, box, and button.
- Save and preview the page to check the effect, then republish.
Test the change
Run an A/B test with a small share of traffic to confirm the collapsible section doesn't lower your conversion rate.