Using anchor links to open accordions and tabs in Divi

Once of the more useful things about web design is the ability to use anchor tags (those things that create links to other pages or websites) to link to sections within the same page. Once clicked the page will jump to (or you can animate it) the content it is linked to.  This is achieved by linking the anchor to the id of the element you want to link to, using a # and the id of the element in the anchor href.

So if I created an anchor tag like this:

<a href="#element-identifier">Link Text Here</a>

and a div like this

<div id="#element-identifier">Div Content Here</div>

if a user to my site clicked on the link, the browser would immediately jump to the that div, instead of opening a new page.

Now Divi has these great modules called Accordions and Tabs. These are useful for presenting large pieces of information in a more manageable layout and not requiring your visitor to have to scroll through pages of information to find the specific piece of data they are looking for. However, sometimes it’s useful to be able to open a specific accordion item or tab with the click of a button, using a similar method as the anchor links above.

This can be achieved by using some custom jQuery. While its not as easy as creating an anchor link, once you know how to do it, it becomes quite simple.

The demo page : you can view this demo on the Anchor links open demo page. You will see that I have created 2 links, some text, and accordion and a tabbed section.

The important thing to note is that I have set a CSS id to the parent element of both anchors as well as the accordion and tabs modules. This is done in the Custom CSS section for each module.

Now for the jQuery:

jQuery(function ($) {
    //accordion
    $('#open-accordion-dance a').on('click', function(event){
        $('#my-accordian .et_pb_accordion_item_1 .et_pb_toggle_title').click();
        $("html, body").animate({ scrollTop: $('#my-accordian').offset().top }, 1000);
    });
    //tab
    $('#open-tab-dance a').on('click', function(event){
        $('#my-tabs .et_pb_tab_1 a').click();
        $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);
    });
});

The two blocks of jQuery code do roughly the same thing, except the first is for the accordion and the second is for the tabs.

Effectively, each block binds to the click event of the selected anchor, (in this case selecting the anchor based on the id of the parent element) and then triggers the default click event handler of the relevant accordion or tab item. It then animates the page to scroll to the same position as either the accordion or tabbed element, based on that element’s id.

The actual selectors I’m using are irrelevant, you could use whatever selectors are generated by the Divi page. The important thing to note is how I specify which accordion item or tab item (by number) to trigger the click for. Divi doesn’t allow you to give the accordion or tab elements their own CSS id’s, so you have to inspect the page to determine which one you need to open.

If you want to try this out yourself, you can download the Anchor Links Demo code and install it yourself. Simply add the Page Layout to your library as you would any other layout, and add the jQuery to either your child theme or integrate it into your Divi Theme Options under Integrations (remember to put it between script tags).