Using Divi’s Internal HashChange Event for Navigation
You may have seen the HashChange javascript event in a couple of modules within Divi that allows navigation to take place for those modules’ children. With KK Tabs & Toogles, you can now do this with each of the modules offered.
Let’s suppose that you have a Vertical Tabs Ext module with several tabs. If there is a page elsewhere in your site that you may want to reference or link to one of those tabs, then you would only need to add a hashtag to that link referencing the particular tab. Below is how to go about it.
For this Vertical Tabs mentioned, find the “Use HashChange Event?” toggle control in the Extended tab settings and set to “Yes.” (NOTE: this control is found in the Extended tab for the Vertical and Horizontal Tabs modules. For the Toggle and Accordion modules, it is found in the Design tab.) Then, assign a CSS ID within the Advanced tab in the module settings. Make the ID meaningful but not “wordy.” You can hyphenate but DO NOT use spaces. Then in the link you are forming, include the hashtag, ID and the index of the vertical tab you are referencing. Something like:
http://example.com/somepage/#verttab|2
Notice the “pipe” symbol between the hashtag/ID and the tab index. The pipe is the demarcation that the code expects to find in the hash. Tabs are referenced beginning with 0 (zero). So, in the above, 2 actually represents the third tab.
When this link is clicked or otherwise exercised, somepage will render, the Vertical Tabs will scroll into view and the third tab will become active. Take note that this can be deployed by any means, be it a link within text or even a dropdown navigation menu. This can be used in the KK Vertical Tabs, Horizontal Tabs and Accordion modules.
Not to be out-done, there is also a means to do the same with a collection of KK Toggles. Since Toggles are designed one at a time as opposed to a group, a CSS ID needs to be assigned to each toggle in the group that you want it to respond to a hashchange event. The only difference in creating the linkage for this is there will be no pipe symbol or index. Something like:
http://example.com/somepage/#toggle1
Unlike in the other example, the one (1) here is actually part of the ID. In fact, an alphanumeric ID is not required. You only need something meaningful.
Below are some actual examples: