Streaming live at 10am (PST)

[SOLUTION] Setting Default Active Tab


#1

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!


#2

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