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 1 / 3

Uh, yes please!

http://s2.quickmeme.com/img/ae/aeb25e21a2ee1e9639a68b68b1110ec35a34ca7938caa79c0f3315cdfc79036a.jpg

@Noah, do you have a .unbounce file you can send across, I’d love to see how this is done!

hey @James_Dixon1, sure thing! Give this a try: https://www.dropbox.com/s/vklffaxu85bjwgk/tab_content.unbounce?dl=0

Thanks, your a star!

Awesome script, Noah!

Works like a charm 💎

Hi @Noah

Thank you for your tip! it works perfectly!!

I wonder if there is a way to go further:

In this version the content of the first button automatically shows on the landing page;

I would like the section to appear only when the visitor clicks on it.

Is it possible?

Thank you

Silvia

Hey @silvia, glad to hear it’s working for you. If you hide the first content box (along with the other boxes) in the builder by toggling the visibility, the functionality should still work as expected!

Hey @Noah, thanks for your reply!

In the way you suggested when none of the tab is selected there will be a big white space below, whereas I would like this section to appear only when selected (with the content in it). I don’t know if I made myself clear enough! Hope you can help me

@silvia, if you are simply concerned about the background colour of the container box showing, you should be able to change to opacity to 0 in the box element’s properties.

If you’re concerned about the empty space, unfortunately I don’t have a good solution for dynamically changing adjusting the height/space being used.

While not exactly the same, you may want to check out collapsible page sections: 4How-to] Create a Collapsible Page Section

Hope this helps!

Hi @Noah,

I tried the collapsible page sections but it did not work for multiple elements, so I think I might need a combination of the two… is it possible to adjust the code to have something like that?

Thanks!

Hey @silvia, it might be possible unfortunately I don’t have a solution at the moment. I’ll be sure to update this post if I come up with something!

@Noah or @Unbounce-Experts Is there a way to make a text link in one tab link to another tab? For example - in the first tab there is a product description and a text link that links to another tab containing add on products. The add on products would also be a tab.

Yes, you should be able to add the box id as the text link. Well after trying that myself and it not working I think some additional javascript may be required. I’ll play with it more later and let you know

Joe

Thanks @Joe_Savitch! I tried that originally and it didn’t work, I was hoping I was having a blonde moment and missing something. Unfortunately javascript throws me for a loop, I appreciate your assistance!

Hey Joe, have you had any luck?

Thanks, very useful!

Can we move tabs automatically ?

Hi Hope_Rob, what do you mean move tabs automatically?

Hey @Noah, code is awesome! I was wondering though if there was a way to make the page scroll to a specific section when clicked. I’m playing around with having the tab buttons in a sticky nav bar and would like for it to jump to the section when clicked. The traditional way of doing this though doesn’t work since the “Go to URL” is already being used for this code. Any thoughts on if this is possible?

Click here and check ( BEST SERVICES FEATURES ) section : http://unbouncepages.com/combine-healtic-1/

My question was can we move (rotate) or (Slide) all three tabs automatically.

Hi Noah!

Firs thanks a lot for this script!! This is DOPE!! 🙂

I implemented it already in couple of Landing pages. But right now I’m trying to have 2 Tabbed Sections in 1 Landing Page.

But I don’t find the solution, or even if this is actually possible?

I tried changing the ,variable" names by adding a 1 at the end. But that only messed up the worked code.

Is possible? Or not at all…?

Thank you in advancee!!

This is nice work. Thank you! Unfortunately, there appears no way to make it responsive for mobile view, is there?

Works like a charm, Noah! Thanks for sharing.

I’m wondering if there’s a way I can delete the effect when clicking on the tabs. Is there a fix to delete this effect?

Best regards,

Bob

It seems the tabs don’t load correct on a mobile device - according to the demo. Is there an example of a page that uses tabs, that loads correctly on a mobile device?

Hi I’m struggling to get this to work. In the code below do you simply enter the two section ID’s or multiple ID’s for each content section?

//Replace #lp-pom-box-330 with the ID of your nav box
var navButtons = $('#lp-pom-block-29');
//Replace #lp-pom-box-331 with the ID of your content box
var contentBoxes = $('#lp-pom-block-26 .lp-pom-box');