How to Add Tabbed Content Sections to a Classic Builder Page

Tabbed sections let visitors switch between several blocks of content in the same space, which keeps a long page compact.

This is community code, not an official Unbounce feature. Unbounce Support can't troubleshoot custom code. This setup takes some care, so 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.

Add tabbed sections to your page

The scripts are hosted on GitHub as Create tabbed sections on your Unbounce page.

1. Add a box element to hold the tab buttons.
2. Add a larger box element below it to hold the tab content.
3. Add a button for each tab and place the buttons, in order, inside the first box.
4. For each tab, add a box element with that tab's content, place it inside the content box, and hide it.
5. For each tab button, enter the ID of its content box in the Go to URL field.
6. Copy the JavaScript from tabbed_section.js and add it to the JavaScripts section.
7. In the script, enter the IDs of your tab buttons and content boxes.
8. Copy the CSS from tabbed_section.css and add it to the Stylesheets section.
9. In the CSS, change the colors to set how the active tab looks.
10. Save and republish the page.