[How To] Add Tabbed Sections

  • 16 February 2017
  • 63 replies
  • 2321 views
Noah
Userlevel 7
  • Noah
  • Former Unbouncer
  • 126 replies

tips-scripts-banner
tips-scripts-banner1921×680 283 KB

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 :spinbounce::gif_master:

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… :gif_master:


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?
:spinbounce: Check out the Ultimate List of Unbounce Tips, Scripts & Hacks

63 replies

digibomb
Userlevel 6
Badge +1

Uh, yes please!

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

Noah
Userlevel 7

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

I

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!!

S

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');
Tiffer
Badge

I see others have asked about being able to use this script on multiple sections on the same page. I’d also like to be able to do that. Has anyone been able to achieve this yet? Are there plans to make it happen? Thanks so much. Tiffany

Paul_Ghibeaux

hello there i have followed your tutorial for adding tabbed sections, i had link to the good id for my navigation bar but it’s still not working it stuck on the first section without moving to the others, Any ideas ?

J

Thanks, your a star!

coldina

Thanks, very useful!

Eva_Cruz

I couldn’t make it work just following the instructions, but I took a very close look at Noah’s Unbounce Demo Tabs page, posted in the comments.

Here are a few instructions missing from the official instructions:

  • The “buttons box” should be in one SECTION and the “content box” should be in another SECTION just below the “buttons box” section. If they are not in different sections it won’t work!
  • Set the placement of the Javascript provided to “Before body end tag”.
  • In the Javascript you have to enter the ID of the “buttons box” and of the “content box” NOT the ID of any individual button or content:
  • var navButtons = $(’#lp-pom-box-XXX a’); replace XXX with you buttons box ID
  • var contentBoxes = $(’#lp-pom-box-XXX .lp-pom-box’); replace XXX with your content box ID
  • You can find the ID of the boxes and buttons at the bottom of the “properties” tab.
mare011

If this doesn’t work for you it might be that you don’t have jQuery added to your Scripts.

To fix this add a new script in Javascripts, call it jQuery, place it in Head and here is the script content:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Keith_esernio

Any insights on how to change the animation that occurs when switching between tabbed items? Would prefer no animation at all over what we get for free with what you provided. Thanks!

K

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

Stefano
Userlevel 7
Badge +4

Awesome script, Noah!

Works like a charm 💎

Noah
Userlevel 7

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!

Noah
Userlevel 7

@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: [How-to] Create a Collapsible Page Section

Hope this helps!

Joe_Savitch

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

J

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?

Hope_Rob

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.

Noah
Userlevel 7

Hey @InvesTechs, it looks like I hadn’t enabled the mobile version of my page. After a little bit of resizing and element scaling, I was able to get the mobile version of this solution working. No other changes were needed.

Something I found helpful when resizing for mobile was revealing a nested content section (from step 4) and working on them one at a time.

cducar

@Noah - I would like to incorporate 2 tabbed sections in one landing page.
I tried altering the code, which didn’t really help.
Any assistance would be appreciated!

D

Any updates on featuring multiple sections with tabbed content? The code works great, but I’d like to be able to use tabbed content in different sections on the same page.

H

Noah commented it shortly after posting, here’s the link I used to download! 🙂

L

Has anyone been able to get this working for two different sections?

Laserfocus
Badge

Hey guys!

Thanks for the work you are doing here and tabbed sections really make the website stand out and look unique.

I made a video on YouTube in my Unbounce playlist showing how to set this up…

Here is the link for those who want to see how to do this from start to finish:

Let me know if you have any questions!!

Ivan

Eric_Decker

Same. Would love just a fade in/out…

Reply


Terms & ConditionsCookie settings