Create control buttons to change Tab

Today we will see how to add control buttons to switch from one tab to another with a little code.

The goal will be to create a button that will go to the first Tab to the left of the active Tab and another one to the first Tab to the right of the active Tab.

Step 1: Set a default active tab

After creating your Tab, the first thing to do is to make sure that you have an active Tab by default. It is necessary that when your page loads, a tab is active.

To do this, you can go to the settings of your Tab and choose the default active tab in "Set Active Tab".

Step 2: Create 2 buttons

Now we can start creating 2 buttons in our project. You can insert buttons, link block or even a Div block if you want. However, we recommend that you add a custom aria-label attribute describing the purpose of the buttons.

You can customize the buttons as you wish

Step 3: Assigning classes to buttons

Once you have created your buttons, you will have to give them a class. Each button must have a specific class. For this you can add a combo class.

Step 4: Add jQuery code

Now we enter the part a little more technical. We will insert the following code in the parameters of our page, in the field Before Body Tag :

<script>
$('.classe-bouton-suivant').on('click', function() {
  $('.w-tab-link.w--current').nextAll('.w-tab-link:first').click();
});

$('.classe-bouton-precedent').on('click', function() {
  $('.w-tab-link.w--current').prevAll('.w-tab-link:first').click();
});
</script>

Now we have to come and modify this code a little bit.

Instead of class-button-next, you will put the name of the class of the button that will allow to go to the next Tab. If you have used a combo class, you will have to modify .class-button-next by .class.combo-class where class is the first class of your combo class and where combo-class is your combo class.

Instead of class-button-precedent, you will put the name of the class of the button that will allow you to go to the previous Tab. If you have used a combo class, you will have to modify .class-button-precedent by .class.combo-class where class is the first class of your combo class and where combo-class is your combo class.

If you use several Tabs in your page, you will have to add the class you have given to your Tab links before the 4 .w-tab-links. For example .home-header_tab-link.w-tab-link

Step 5: Publish the Webflow project

The code works only when the project is online. You will have to publish your project to test this feature to change Tab with buttons!

If you want, you can also discover our tutorial to create buttons that allow to scroll horizontally.