Note: Currently, in order for this tutorial to work, the Minify And Combine Javascript Files option must be enabled in Divi > Theme Options
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 defined #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)
},500);
});
</script>