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.

Leave a Reply

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