[SOLUTION] Setting Default Active Tab

[Diarmuid_Sexton]

With tabs lacking the functionality to set the default tab (except to leave the tab open in the designer that you want to default to), here’s a custom solution which ensures the correct tab is open every time you publish the site.

In these examples, the tab links have a class of “.tab-link” and the tab panes are “.tab-pane”

The below piece of code sets the default to none i.e. no tab showing.

<script>
	$(".w-tab-link").removeClass("w--current");
  	$(".w-tab-pane").removeClass("w--tab-active");
</script>

To change it to default to the first tab showing:

<script>
  	$(".w-tab-link:nth-child(1)").addClass("w--current");
</script>

Or this works a little faster when the page is rendering:

<script>
	// remove default tab and set to none
	$(".w-tab-link").removeClass("w--current");
  	$(".w-tab-pane").removeClass("w--tab-active");
  	
  	// make the nth-child the default tab
  	$(".w-tab-link:nth-child(1)").addClass("w--current");
  	$(".w-tab-pane:nth-child(1)").addClass("w--tab-active");
</script>

Sin a bhfuil!

Bonne chance!

Setting Default Tab, NOT Active Tab

According to this page, this is how you set up the active tab: http://forum.webflow.com/t/tabs-upon-opening-website-what-user-sees-when-first-landed/4928/3 However, when at any time you work on one of the tabs content (or even the tab itself) Active Tab suddenly switches to this tab. So basically the last tab you were working on become the default tab. Another option, according to this page, is to use custom javascript for each tab you have: http://forum.webflow.com/t/defaulting-to-a-certain…

Have Tab1 slected by default - Tabs Settings

Hi, I’m designing a Pricing section. So I want to show by default the pricing for Annually and having the user click on Monthly if he wants. the challange here is that WF does not seems to let me choose a TAB by default. There is also the None which seems in the way. Any turn aournd ? [image] Cheers!

How to set default tab?

Hi, webflow site already exported to raw code and I notice the default tab is not the first tab (or the one I wish to have as default). Can anyone offer a simple solution to keep the first tab the default tab when the page loads? Here is my site Read-Only: LINK (how to share your site Read-Only link)

Active tab =/ default tab

Despite having set the active tab to tab 1 in the tab settings menu, it doesn’t act as the default tab when it is published. Is this a limitation of Webflow or do I need custom javascript? I would greatly appreciate a workaround. Here is my public share link: LINK Here is my published link: LINK

Need help with active the right tab

Hi guys, I wonder if there is any way that I can make a tab open by default based on domain extension? Lets say I have domain.com & the tab set to English by default, but when people access with the domain.jp, the Japanese tab will be active by default? [webflow] Thank you!

[vincent (Vincent Bidaux)]

@Diarmuid_Sexton

(except to leave the tab open in the designer that you want to default to)

Yes, and when you have a lot of tabs on a website, it happens like this: publish, review, notice some tabs are left with wrong defaults, fix, republish…

That is why your scripts are very welcome! And are going to be a great help for 2 of my sites and the one I’m starting in October. It is going to save me a decent amount of time, so thanks a ton

Please everyone, vote for this idea too:

https://wishlist.webflow.com/ideas/WEBFLOW-I-1072

[Diarmuid_Sexton]

Just to add another tip to this.

If you want to change the active tab depending on the link a user clicked on a previous page - you can do so by adding a “?test” to the end of the url clicked.

For example - suppose there are two links - one to monthly and another annual pricing options. If the user clicks on the annual link - the annual pricing option content should be the active tab. To do this, add ?annual to the end of the url of the link i.e. /pricing?annual

Then, assuming that the “Annual” pricing is in the 2nd tab on the pricing page, this piece of jquery will make it the active tab.

This should be pasted before the </body> tag

<script>
        
        if (window.location.href.indexOf("?annual") > -1) {
            $(".tab-link(2)").addClass("w--current");
            } 
        else {
            $(".tab-link(1)").addClass("w--current");
            }
          
</script>

See here

That’s it!

[jmanooch]

THIS IS SPECTACULARLY ANNOYING. PLEASE JUST ENABLE A DEFAULT TAB OPTION WEBFLOW. THANK YOU. It makes no sense to have to keep fiddling between the live edit tab, and the default tab (which are clearly not the same thing?!).

[MatthewSpiegelhalter]

when you publish the site make sure you select the tab you want to be default, this worked for me.

[Jeandcc (Jean Costa)]

Webflow seemed to start prefixing with the w- the classes for tab links and tab panes , causing the selectors for the original script to break. Just update your snippets so it matches the following:

<!-- START FIX: Always show the first tab first -->
<script>
  $(".tab-link").removeClass("w--current");
  $(".tab-pane").removeClass("w--tab-active");

  $(".tab-link:nth-child(1)").addClass("w--current");
  $(".tab-pane:nth-child(1)").addClass("w--tab-active");
</script>
<!-- END FIX: Always show the first tab first -->

[Dean_Arnold]

Hi all,

On page open, I’d like to dynamically choose the tab content to display based on a value in the page’s CMS collection

e.g.
Field name: ‘Tab-to-display’
Value: ‘Tab2’

Can your script be expanded to achieve this goal?

Cheers!

[Dean_Arnold]

Solution:

$(document).ready(function() {
$(‘a[data-w-tab=“CMS-Field”]’).click()
});

… Let’s you choose the default tab according to a field in your CMS.

[efficient (Alex Bass)]

This helped, thanks so much! Be sure to put it before the option because I think it relies on jQuery.

Any chance someone could write this in a way to not require jQuery?

<!-- Default Active Tab -->
<script>
  $(".tab-link").removeClass("w--current");
  $(".tab-pane").removeClass("w--tab-active");

  $(".tab-link:nth-child(1)").addClass("w--current");
  $(".tab-pane:nth-child(1)").addClass("w--tab-active");
</script>

Webflow really needs to bake this into the product—it’s absurd how often I’m fighting with ti.

[Jeandcc (Jean Costa)]

That’s the kind of stuff that ChatGPT can easily do. For people that use Webflow and don’t know a lot of JS, AI is a definitely great tool to have.

Just ask it to teach you the basics of JS programming for websites so you know what to ask it when you need it, and you’ll have a great life.

<!-- Default Active Tab -->
<script>
  // Helper function to add a class to an element
  function addClass(element, className) {
    if (element.classList) {
      element.classList.add(className);
    } else {
      // For older browsers that don't support classList
      var classes = element.className.split(' ');
      if (classes.indexOf(className) === -1) {
        classes.push(className);
        element.className = classes.join(' ');
      }
    }
  }

  // Helper function to remove a class from an element
  function removeClass(element, className) {
    if (element.classList) {
      element.classList.remove(className);
    } else {
      // For older browsers that don't support classList
      var classes = element.className.split(' ');
      var index = classes.indexOf(className);
      if (index !== -1) {
        classes.splice(index, 1);
        element.className = classes.join(' ');
      }
    }
  }

  // Remove classes from all tab links and panes
  var tabLinks = document.querySelectorAll(".tab-link");
  var tabPanes = document.querySelectorAll(".tab-pane");

  for (var i = 0; i < tabLinks.length; i++) {
    removeClass(tabLinks[i], "w--current");
    removeClass(tabPanes[i], "w--tab-active");
  }

  // Add classes to the first tab link and pane
  addClass(tabLinks[0], "w--current");
  addClass(tabPanes[0], "w--tab-active");
</script>

[Benja-Ramblings (robayerst@gmail.com)]

I know this is a bit of an old thread, but wanted to chime in. It seems that if you select the Tabs component in the nav tree, then open it’s Settings and use the radio button to select the tab you want to be default, it’ll load that page by default on Chrome/Safari. I used the code here, and it worked - but then I did a little more digging, and found that webflow does this function within the designer. I have Tab one radio button selected, and that’s how it shows up in my preview and custom site.

Possibly there was an update over the last 7 years to include it. That’s good news, right? Weblfow for the win.