[How To] Add Tabbed Sections

design
ui

#21

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.


#22

Hi Noah!

Firs thanks a lot for this script!! This is DOPE!! :slight_smile:
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!!


#23

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


#24

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


#25

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?


#26

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

#27

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/


#28

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/


#29

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


#30

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.


#31

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.


#32

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!


#33

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