Create control buttons to switch tabs

Tutorial
March 20, 2023
3 min
Webflow Tutorial
Key points

Today, we will see how to add control buttons to switch from one tab to another using a bit of code.

The goal will be to create a button that moves to the first Tab to the left of the active Tab, and another that goes to the first Tab to the right of the active Tab.

Step 1: Define a default active tab

After creating your Tab, the first action to take is to ensure that you have a default active Tab. It is essential that when your page loads, a tab is active.

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

Set active tab webflow

Step 2: Create 2 buttons

Now, we can start creating 2 buttons in our project. You can insert buttons, link blocks, or even a Div block if you prefer. However, we recommend adding a custom attribute of type aria-label to describe the purpose of the buttons.

You can customize the buttons as you like.

Tab control buttons

Step 3: Assign classes to the buttons

Once your buttons are created, you will need to assign them a class. Each button should have a specific class. For this, you can add a combo class.

Step 4: Add jQuery code

Now we enter the slightly more technical part. We will insert the following code into the settings of our page, in the Before Body Tag field:

<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 need to modify this code a little.

Instead of classe-bouton-suivant, you will put the name of the class of the button that will allow you to move to the next Tab. If you used a combo class, you should change .classe-bouton-suivant to .class.combo-class where class is the first class of your combined class and combo-class is your combined class.

Instead of classe-bouton-precedent, you will put the name of the class of the button that will allow you to move to the previous Tab. If you used a combo class, you should change .classe-bouton-precedent to .class.combo-class where class is the first class of your combined class and combo-class is your combined class.

If you are using multiple Tabs on your page, you will need to add the class you assigned to your Tab link before the 4 .w-tab-link. For example, .home-header_tab-link.w-tab-link.

code buttons to change tab

Step 5: Publish the Webflow project

The code only works when the project is live. Therefore, you will need to publish your project to test this functionality for changing Tabs with buttons!

button to change tab webflow

If you wish, you can also check out our tutorial on creating buttons that allow horizontal scrolling.

Thibaut Legrand
Thibaut Legrand
Technical Solutions Architect & Webflow Expert

Suggested articles

black and white photo of a digital marketing expert from behind presenting a communication project on his computer to a customer.
News
SEO

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025

The 10 Best Digital and Communication Agencies for Finance Professionals in 2025
2025 SEO Stats
Documentation
SEO

SEO Trends 2025: 20 Stats to Boost Your Search Rankings

SEO Trends 2025: 20 Stats to Boost Your Search Rankings
A 3D shiny diamond with “Site of the Day” written in the background and four awards displayed in the front.
Storytelling
Digidop

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Awards & Distinctions: Digidop.com recognized by Prestigious Organizations

Want to turn your website into your most valuable asset?

Contact us today