[How To] Add Tabbed Sections

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

1 Like

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

1 Like

@langtry I couldn’t without the file itself - I rebuilt my page inside Noah’s template instead, as when I copied the script over to my page it wouldn’t work for some reason. I also got no response when I messaged for help!

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.
3 Likes

Hi, I tried following instructions but it doesn’t work for me. Can someone please take a look at my page and let me know what I did wrong? https://www.321ignition.com/partners/

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>

1 Like

Thank you for this. This should be in the main post. I was pulling my hair out trying to figure out what was wrong and I was following the diy step by step!

So I’m having issues getting this to work, I’ve followed all the instructions and I’m unable to get it to work. Also, if I want to have more than one button and content box what part of the Jscript do I copy and change with the button and box IDs? Someone please help.

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

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 ?

2 Likes

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!

2 Likes

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

1 Like

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