Streaming live at 10am (PST)

[SOLUTION] Setting Default Active Tab

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>
	$(".tab-link").removeClass("w--current");
  	$(".tab-pane").removeClass("w--tab-active");
</script>

To change it to default to the first tab showing:

<script>
  	$(".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
	$(".tab-link").removeClass("w--current");
  	$(".tab-pane").removeClass("w--tab-active");
  	
  	// make the nth-child the default tab
  	$(".tab-link:nth-child(1)").addClass("w--current");
  	$(".tab-pane:nth-child(1)").addClass("w--tab-active");
</script>

Sin a bhfuil!

Bonne chance!

6 Likes

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 :slight_smile:

Please everyone, vote for this idea too:

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

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
image

That’s it!

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?!).

3 Likes

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

1 Like

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

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!

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.