[How To] Add Tabbed Sections

7 years ago
16 February 2017
63 replies
2361 views

Userlevel 7

Noah
Former Unbouncer
126 replies

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

Show first post Hide first post

63 replies

Page 2 / 3

Hi @bmmeijer did you ever find out how to remove the effect when changing tabs?

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

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.

This is what really helped!!! Not manual, not even copying of the code, but just remake of your page(file). Thanks a lot!!!

Thanks so much Noah!

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

Could you provide a link to your lp? It’ll help pinpoint what might be missing!

Hi,

In my landing page we have a big blank spot, the first box doesn’t show up. Anything I should be adding to the code so that the first box shows up? Thanks!

My primary issue for this feature, along with many other in Unbounce, was stretching the section to be the full width of the screen. Unbounce doesn’t seem to allow full-bleed elements, which seems a bit dated.

My solution was writing media queries for every standard device width on the market (took a full day) just to make it look good on mobile. For those looking to do the same this resource was instrumental: http://screensiz.es/

You can see the implementation at https://template.investechs.com/growth-stage. I’ll continue to refine as I implement this template for clients.

Userlevel 7

Noah
Author
Former Unbouncer
126 replies
5 years ago
30 June 2018

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.

@Noah, The question has come up about mobile responsiveness on this. I’m tearing my hair out trying to format this for mobile. It seems even your demo page doesn’t work on mobile (http://landingpage.noahmatsell.ca/tab-content/)

Do you have any suggestions? As soon as I get it looking good on one view width it looks like crap on another device size. I’m tempted to drop Unbounce and go back to full custom so I don’t have to deal with the limitations of a CMS.

Thoughts?

Awesome , Noah!

How do I insert a transaction slide effect between active buttons? To understand each other better, something like that (see the last section “FIND OUT MORE” at the bottom of the page, before the footer): https://mailbakery.com/

Hi @Noah! We applied this to one of our pages (pricing pages). How can we set up one of the options to display by default? For example, as soon as a user lands in the page it appears the fees in USD and the user can change this to see the rest of the options. Here’s the page: https://www.ethosdata.com/dataroom-pricing/

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

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?

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

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

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

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.

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?

Hi Hope_Rob, what do you mean move tabs automatically?

Can we move tabs automatically ?

Thanks, very useful!

Hey Joe, have you had any luck?

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!