Webflow Tips & Tricks: Make first tab default tab

Are you using tabs as a navigational tool on your own or your client's website? It can be a great way to organise information on a page, but has some pitfalls as well. One of them is the fact that at the time of writing you are not able to make one particular tab the "default" tab that opens when the user visits the particular page. To achieve this you would have to leave the tab open in the designer that you want to default to. Not a great solution, but don't worry, there's help available via custom code. To make the first tab the default tab, follow the 5 steps below:

  1. Navigate to the page you're using the tab navigation
  2. Open the page settings for this page via Webflow's Pages Navigator (P) and press the little cog button
  3. Here you can access the Custom Code area and scroll down to the "Inside <head> tag" section
  4. Enter the following code into this section:
    <script>$(".tab-link:nth-child(1)").addClass("w--current");</script>
  5. Replace the class ".tab-link" with the class you've used for the tab link you want to make default

Keep in mind that if you are using Webflow's own pagination feature inside one of your tab panes, there might be issues and the pagination for this section might stop working.

Want some more info on this? Check out the following thread in the Webflow forum, which I found very helpful and have based my solution on: Setting Default Active Tab.

This might also interest you...