Tabs widget – how to link to a specific tab

This question kept coming up on the Tabs widget for page builder plugin support, so I decided to write this short post about it.

How can we link to a specific tab?

This can be done with a bit of custom JavaScript code.

First we have to add a class and a href to the link/button, that will trigger the tab to open. For this example we will use this link <a class="js-trigger-tab" href="#tab-test-2">open test tab</a>. In the href you have to write the ID of the tab content div (in our example: #tab-test-2) that you want to open and you also have to set the class of the link to js-trigger-tab.

Then we need to add the JS code, which will open the tab:

That’s it 🙂

Let me know, if you have any questions in the comments section below.

4 comments on “Tabs widget – how to link to a specific tab

  1. Thank you for this post, the code works fine within tabs on the same page. However, I didn’t manage to get this work if the target tab is on the other page. Is it possible to make a link to a tab on another page, and how the href parameter should be formatted in that case?

Leave a Reply

Your email address will not be published. Required fields are marked *