Custom Tab Buttons Tutorial

Free yourself from the restrictions of the Tabs Menu buttons!

Click the buttons below to view different tab panes over on the right. You can move these buttons anywhere on the page, they don't even need to be next to each other!

ChicagoLondonSan Diego
Chicago
London
San Diego

How It Works

  1. Add a Tabs element to your page.
  2. Add the Buttons to your page that you want to trigger the tabs. Make sure the Button text is the exact same as the Tab that you want it to trigger.
  3. Add a class named tab-button to each Button.
  4. Add a class named tab-button-active to the Button that corresponds to the initially active tab.

  5. Add the code below to your page in the Before </body> Tag section, located in the page settings.

    <script type="text/javascript">
$(".tab-button").click(function(e) { 
  e.preventDefault();
  $(".tab-button").removeClass("tab-button-active");
  $(".w-tab-link:contains(" + e.target.innerText + ")").click();
  $(e.target).addClass("tab-button-active");
})
</script>
  6. Publish your site and confirm it works. After you do this, you can then hide the Tabs Menu by setting its display to none.

Want to do even more with your sites?

Check out Jetboost, a suite of custom features that you can add to your Webflow sites, no code required.