There have been multiple requests in our Community to achieve this functionality, and thanks to a bit of code and a lot of trial & error - we’re stoked to announce the newest addition to Tips and Scripts

Introducing: Tabbed Sections In Unbounce Landing Pages

Tabbed content areas are a great way to pack sections of content into a neat, concise area with a nice user experience.

You can see this in action (built in Unbounce) here:

Bear in mind, this functionality takes a bit of finesse, so if you’re brand new to using custom Javascript in your Unbounce landing pages - feel free to pop into the Community here if you need some troubleshooting.

How to Install in Unbounce

Click Here for Instructions

🚨

This is not an official Unbounce feature. This functionality is based entirely on third party code, and has only been tested in limited applications. Since this isn’t a supported Unbounce feature, our support team will be unable to assist if things go awry. So if you are not comfortable with HTML, Javascript and CSS, please consider consulting an experienced developer.

First, go grab the latest scripts:

https://gist.github.com/noahub/fc3ed61f29d0176e2db53c7862033da9

Step 1.

Create a box element that will contain your tabbed content sub-navigation buttons.

Step 2.

Create a larger box element below your first box that will contain your tabbed content sub-navigation content.

Step 3.

Create your sub-navigation button elements and nest them in your first box in order.

Step 4.

Create a new box element, fill it with your desired content, nest it in the content container, then hide it. Create a second content box, fill with content, nest it in the container, then hide it., etc. etc

Step 5.

Select your first button, add the ID of the first content box to the ‘Go to URL’ field. Repeat for all subsequent buttons/boxes.

Step 6.

Copy the javascript in ‘tabbed_section.js’ and paste in your Javascripts section.

Step 7.

Update the javascript with your button and content box element IDs.

Step 8.

Copy the CSS in ‘tabbed_section.css’ and paste in your Stylesheets section.

Step 9.

Update the colors in the CSS snippet to reflect the desired appearance of your ‘active’ tab

You’re done! Now sit back and let the conversions roll in…

Can’t see the instructions? Log-in or Join the Community to get access immediately. 🚀

Want to take your Unbounce landing pages + Convertables to the next level?

Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

Page 3 / 3

Do they have an updated animation for this? I also prefer no animation at all or something updated than this.

Same. Would love just a fade in/out…

I want to use the text instead of buttons. When I tried with the text, it shows the last container. Please help me with this. My hand is tight in JavaScript. Thank You

Hi, @Noah . Thanks for this. Tried applying this to the FAQ section of my landing page. I put all the questions of the buttons and answers on the box. Unfortunately, I don’t know how to customize it in a way that all answers will be hidden until a visitor get clicked on the button.

Currently, all answers are displayed right after the page loads.

I want people to click one the questions to get the answer.

Hoping for your help or anyone in the community.

Thanks a lot in advance!

Oops! I was able to do this by adding

contentBoxes.hide();

contentBoxes.find(’*’).hide();

after #42

Thanks!

I need to put this tabbed section in more than one section of my page. Has anyone been able to do that yet?

Does anyone know how to make the button in the tabbed section the main one that shows first when the page loads? Right now I have it where the end button on my navigation bar is the one that shows up first as the main active button in the nav bar but I want to have the first button in my nav bar show up as the active button when the page loads. Here’s a page to show you what I’m talking about: https://ad.bintheredumpthatusa.com/greensboro/

It’s showing the 4 yard bin button first when I want the 20 yard bin button to show as the active button first when the page loads. Any help is much appreciated!

-ryan

Thank you!

Thanks, this helped clarify a couple things for me that weren’t detailed in the instructions.

@Noah thank you for this!

I’ve managed to make it load randomly if anyone is interested. You’ll have to remove the last line in the provided jQuery

DELETE THIS

//onload, make first button active

navButtons.first().addClass(‘active’);

ADD THIS:

//------------- RANDOMISER -------

var random = Math.floor(Math.random() * 1000);

//Replce “.tab-button” with your button custom class

var $a = $(".tab-button");

$a.eq(random % $a.length).addClass(“active”);

//------------- TRIGGER CLICK FUNCTION -------

$( document ).ready(function() {

$(’.active’).trigger(‘click’);

});

How i can use this tab twice on one page?

@Noah