How to create tabs that show/hide content

Design help General
1

Hello everyone,

I was wondering if anyone from the Webflow team can tell me how the How can Webflow help you? section on webflow.com was created. I was really hoping to have similar functionality to show different contact forms for 2 different store locations on a site I am building.

Thanks,
Dave

2

Hey @DFink that was custom build using Bootstrap. We plan on creating a similar widget for Webflow though so hang tight!

3

Any chance on telling me how to implement it now? I have to deliver the site to my client in the next 2 weeks.

Thanks,
Dave

4

Here are some that I found. They all have instructions on how to set it up. You’ll have to host the .js files on your own server/dropbox.

http://os.alfajango.com/easytabs/
Tabs | jQuery UI (click on View Source) to see how to set it up.

jQuery is included in webflow so you won’t have to host it.

5

Thanks Sergie,

None of those look as nice as yours. If I created one using Bootstrap could I just insert it into an embed element or would I have to export and do it custom. The client wants to host in webflow so exporting isn’t really an option.

Thanks

6

From looking at the demo markup for EasyTabs - it looks dead simple. I’ve been studying html/css/js for about one month - so disclaimer to all that read this: feel free to jump in & make any corrections to these instructions if you find an error in this guidance. I’ll edit the post…

Inside Webflow:

  1. Create a Div that will act as your overall “wrapper” container for your tabbed content… Give it a class of “tab-container” and an ID of “tab-container”… You can use a “Container” within Webflow for this… Or use the Div Block element… Doesn’t matter - they are just Divs… as long as they have both a Class + ID named “tab-container”…

  2. Create a List via the “List Widget” in Webflow… Give it a class of “etabs”. Style each list item as buttons or whatever… These must be inside the div named “tab-container” that you just created in step 1… (i.e. these are your “buttons” or “tabs” that switch the content).

  3. Create some new Divs, below your styled links - just make sure they are inside the overall wrapper div named “tab-container”… Each of these will house your content. Give each one a unique/descriptive ID…

  4. Now hookup the anchor links - So go back to your first “button”/link that you created earlier in step 2 and have it link to the ID/content for the first div you created in step 3… and so on…

Outside of Webflow:

  1. Externally host the required js files that you download from the EasyTabs site via Dropbox… or a free/paid CDN… (jquery is already included with Webflow, no need to host that)
  2. Copy the direct link…
  3. Add the link in the format below to the “Add code to head tag” area within the dashboard of the Webflow site.

<script src="somesuperlonglinkprovidedbydropboxorcdn/jquery.easytabs.js" type="text/javascript"> </script>

4… And lastly, I believe you have to “call” or “invoke” the plugin - or whatever the proper terminology is (just learning, Javascript/Jquery is much trickier to wrap my head around than html/css…) Add the line of code below to the “Add code before body tag” area within the dashboard of the Webflow site.

    <script>Webflow.push(function () {  
    $('#tab-container').easytabs();
    });</script>

Good Luck :wink:

2 Likes