All Collections
Divi Documentation
Customizing Divi
Tabs Module. Open A Page With A Certain Tab Opened
Tabs Module. Open A Page With A Certain Tab Opened

Open A Page With A Certain Tab Opened Using Divi Tabs Module

Karen avatar
Written by Karen
Updated over a week ago

When you open a page that contains the Tabs module it displays the first tab opened by default. However, it's possible to get any tab you want to be active by default. 

First of all, add an additional unique ID to the Tabs module under the Advanced tab, for example, add  tabs  :

Now you can refer to each tab by adding the following parameters at the end of your page URL. For example, to open the 3rd tab by default add this parameter: 

#tabs|2


The full URL would look like this:  http://website.com/#tabs|2   

Notice, it's zero-based massive, so if you want to display 2nd tab you should define  #tabs|1  etc...

By default, the page does not scroll to the Tab module position if it's not added at the very top of the page. If you want the page to be scrolled down to the exact position of the active tab then add the following code to the Divi / Theme options / Integration / <head> option:

<script>
jQuery( document ).ready(function() {
var hash = document.location.hash;
hashLenght = hash.match(/#(.*?)(.*?)(?=\|)/);
jQuery('html, body').animate({
scrollTop: (jQuery(hashLenght[0]).offset().top - 100)
},500);
});
</script> 

In the above code - 100 is an offset that you can apply for fixed headers so that the tab scroll is in the correct position.

Did this answer your question?