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 load the Page Layout to any new page, via the Divi Builder portability feature, 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).

Buy my Divi Plugins from
Elegant Marketplace.

51 Replies to “Using anchor links to open accordions and tabs in Divi”

  1. This is great! Thanks! Would definitely try this and maybe play with it a bit so that the link directs to another page.

    This got me thinking if something similar could work with the Filterable Portfolio? Such that when a link is clicked from a different page it leads back to the main portfolio page but with a specific category open instead if showing all of the Portfolio items.

    1. Hello Nait

      Divi numbers their tab classes starting with 0, so .et_pb_tab_0 is the first tab, .et_pb_tab_1 is the second, .et_pb_tab_2 is the third and so on. So you would just need to trigger the click on the correct tab.

      In my example I am triggering the click on the second tab at line 9 – $(‘#my-tabs .et_pb_tab_1 a’).click(); which then opens tab 2.

  2. Hi Jonathan,

    Great work! I need this one. A dummy question; can I place that jquiry code also in my code snippet plugin? I also have a child theme, but there I only work with the css file.

    1. Thanks George. I’ll be honest with you I don’t use any code snippet plugins, but if it supports inserting JavaScript then I don’t see why not.

  3. Jonathan,

    It worked perfectly. Let us take a different scenario. For example, from one link I want to open second tab of the tab module while from another link, I want to open third tab of the tab module. Any idea about this situation?

    1. It should be pretty simple, you could probably do something like this


      $('#link-one-div a').on('click', function(event){
      $('#my-tabs .et_pb_tab_0 a').click();
      });
      $('#link-two-div a').on('click', function(event){
      $('#my-tabs .et_pb_tab_1 a').click();
      });
      $('#link-three-div a').on('click', function(event){
      $('#my-tabs .et_pb_tab_2 a').click();
      });

      and so on.

      There’s probably a ‘better’ or more streamlined way to do it, but that should work.

      1. Jonathan,

        Your modified code worked well. But an issue arises when I am trying to put all the links in a single module. Now for each link, a text module is used and in each text module a different CSS ID is used. What if I want to put all the links in one text module? As already href is used to target the accordion / tab module, I cannot put an id in that link text.

        Second issue is that the code is not opening in targeted tabs when called from another page – it only opening the first tab.

        The code works well if used in the same page and each link in it’s own module.

        1. Hi Manas, as I don’t see any comments on your post is my question to you and Jonathan if you find a solution for it? Have the same problem with more links in one module. Hope to hear from you guys.

          1. @Manas and @Robert, to be honest this questions is outside of the realm of this article. Pretty much anything is possible, one just needs to have the know how.

            Most of the articles I post are drawn from either client work or suggestions from clients/customers. As I post these tutorials in between my regular development work it’s sometimes not easy to set aside the time to write a complex article to solve a specific problem (for example my ‘Opening accordions and tabs from another page’ article is taking forever to complete, as it is quite a complex article.)

            If you need this solution for a client project, you are welcome to contact me directly to retain my development services.

  4. I tried to download the json file into my Divi library but am getting a “The file should not be imported in this context” message.

    1. Hi Roy

      You are quite correct, my mistake. The Page Layout should be imported to a page using the Divi Page Builder’s portability feature. Thanks for pointing that out, I have updated the article.

  5. Hi Jonathan,

    Great tutorial! This is exactly what I’ve been looking for.

    I have a question – is it possible to use this solution for links within a tab? What I would like to do is link to the 2nd, 3rd and 4th tabs from the first one.

    I’ve followed your tutorial and managed to make your demo page work, but I can’t make the same thing happen when linking inside a tab.

    What I’ve done is assigned the link an ID of “open-tab-where” – so it looks like this in visual view – where to play – and I’ve assigned the tabs module an ID of “healthcare-tabs”. Then I’ve modified your code to be the following:

    jQuery(function ($) {
    //tab
    $(‘#open-tab-where a’).on(‘click’, function(event){
    $(‘#healthcare-tabs .et_pb_tab_1 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#healthcare-tabs’).offset().top }, 1000);
    });
    });

    However, it doesn’t seem to be having the desired effect! Is there an easy fix to make it work within tabs, or is this a whole other kettle of fish?

    Cheers!

    Hannah

      1. Hi Jonathan,

        That would be wonderful, thanks! If you’re able to make this work using that method I’d love to know. My jquery knowledge isn’t strong at all so I may well be doing something wrong 😉

        Ta!

        Hannah

          1. Oh gosh, no worries at all! Client work comes first, obviously 🙂

            There’s no urgency on this at all – I’m contemplating using it on a site but may use another method as the client is still uming and ahing about how to set it up.

            But yeah, I’m obviously not expecting you to drop everything and answer my query! 😉

  6. hey Johnathan,
    i need to link to the anchors from another page, I inspected your demo page, but found no anchor but #accorian. can you give me a better example?

    1. Hi Mike, to be able to do that you’re going to have to pass a variable to the page that contains the elements you want to activate and then if that post is set output the relevant JavaScript. I will try and see if I can write up an example post.

      1. This would be sweet! Thought maybe I was doing it all wrong when I couldn’t link from another page. Happy there are people like you who can figure these things out!

  7. Thank you for working on this. Have you figured out a way to link to specific tab from another page yet? Would come in handy for a current project. If not, no worries. Thanks again!

  8. I’m looking for a solution to this, and found your article. Thank you. The Divi builder for sure lacks a lot more features. Hopefully, in the near future, ET would implement a nested column feature.

    1. Thanks Cammy, yes I switched themes and forgot to activate the Divi Builder. Thanks for pointing this out, I’ve fixed the page.

    1. Hey Alex

      Thanks for pointing that out. I’ve been playing with some different themes on my blog and this broke the demo page. I’ve moved the demo page to a Divi themed site so it should be working again.

      Cheers

      1. Thank you, Jonathan!

        The demo page works great now!
        I see you’ve replied to Mike here about opening the accordion and tabs from another page.
        Have you finished on writing a tutorial about it that you could link or should I tinker with JavaScript by myself in the meanwhile?

        1. Your timing is perfect Alex, I am in the process of finalising that very tutorial, it’s been the most requested topic I’ve had on this blog and I’ve finally had some time to complete it. It will probably be published sometime today 😉

          1. I’ll be looking forward to it.
            Don’t worry about running late with it. I’m sure it’s worth the wait. 🙂

            Thanks again, Jonathan!

          2. Thanks Alex, sadly as is usually the case, life and work get in the way. But, like the movies, it’s coming soon!

  9. Thanks for your work on this. I’m wondering if it is possible to have this work from links in the WordPress menu and open and accordion. I see you’ve been working on a post to have the links work from another page, will that apply to menu links as well? Thanks

    1. Hi Dawn

      Yes, that post would help you to do it from a menu link as well. I just need to finish that post ;-). It’s just prooving a little more difficult to put together than I originally thought, but I will get there.

      1. Any luck on creating the post? I have links in the footer that I’d like to go to a specific page, and have a specific toggle activated. Thanks!

        1. Hi Jon

          The post is taking longer than expected, due to the nature and complexity of some of the WordPress/PHP principles that are also required. I am hoping to have it completed before the end of the year.

  10. Hello Jonathan,

    anything new for the anchor link to next page accordion issue? I’m really looking forward to a solution (as does my customer).

    Greetings from Germany!

    1. Hi Axel

      Sorry my friend, the end of 2016 was not a good one for me, so I have not been able to complete this article yet. It is coming, but please bear with me a little longer.

  11. Hi Jonathan: I have a grid of icons in Divi above the grid I have a large static image that I would like to change/swap based on the icon I click. So every icon will have a different image. Is this possible if so can you please provide the necessary code to accomplish?

    1. Hi Renee’

      I’m sure it is possible but I’m afraid it would require some custom development. You are welcome to contact me directly if you would like me to tackle this problem for you.

      Regards

  12. I’m trying to get your snippet to work, but i’m having difficulties. I am using the anchor link in my secondary menu in Divi (keep in mind I had a hidden div to keep toggles closed), and having it call to a second accordion toggle on a specific page.

    If I’m on that page, the anchor link will open the toggle, but then it will shoot up to the top of the page instead of staying where the accordion is.

    Also, if I click on the anchor link outside of the page that the accordion is on, it does not work at all — it only directs it to that page.

    Can you help me out?

    1. Hi Trisha

      I’ve removed the url because as soon as I reply to this comment it will publish it. You are welcome to contact me directly if you would like some assistance with this problem.

      Regards

  13. Jonathan,

    It’s me, Trisha again! I’m trying to reuse your anchor link tutorial on a different site this time. My issue this time, however, is that I need to have multiple anchor links opening different tabs.

    The code works perfect if I’m viewing it from the same page the tabs are one. If I’m viewing from an external page, all the anchor links do is route to the page the tabs are on, but do not open the tabs or even scroll to them.

    Would you mind taking a look to see if you can figure out what i’m doing wrong?

    http://elkodowntown.wpengine.com/our-members/ (page tabs are on, anchor links are in main nav under /our-members)

    here’s the js:

    jQuery(function($) {
    $(‘.menu-item-179 a’).on(‘click’, function(event){
    tabScroll(‘.et_pb_tab_0 a’);
    return false;
    });
    function tabScroll(){
    $(‘#member-tabs .et_pb_tab_0 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#member-tabs’).offset().top }, 1000);
    }
    jQuery(function($) {
    $(‘.menu-item-180 a’).on(‘click’, function(event){
    tabScroll(‘.et_pb_tab_1 a’);
    return false;
    });
    function tabScroll(){
    $(‘#member-tabs .et_pb_tab_1 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#member-tabs’).offset().top }, 1000);
    }
    });
    jQuery(function($) {
    $(‘.menu-item-181 a’).on(‘click’, function(event){
    tabScroll(‘.et_pb_tab_2 a’);
    return false;
    });
    function tabScroll(){
    $(‘#member-tabs .et_pb_tab_2 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#member-tabs’).offset().top }, 1000);
    }
    });
    jQuery(function($) {
    $(‘.menu-item-182 a’).on(‘click’, function(event){
    tabScroll(‘.et_pb_tab_3 a’);
    return false;
    });
    function tabScroll(){
    $(‘#member-tabs .et_pb_tab_3 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#member-tabs’).offset().top }, 1000);
    }
    });
    jQuery(function($) {
    $(‘.menu-item-183 a’).on(‘click’, function(event){
    tabScroll(‘.et_pb_tab_4 a’);
    return false;
    });
    function tabScroll(){
    $(‘#member-tabs .et_pb_tab_4 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#member-tabs’).offset().top }, 1000);
    }
    });
    $(function hash() {
    var hash = $.trim( window.location.hash );

    if (hash == ‘/our-members#shop’) { tabscroll(‘.et_pb_tab_0 a’); }
    if (hash == ‘/our-members#service’) { tabscroll(‘.et_pb_tab_1 a’); }
    if (hash == ‘/our-members#eat-drink’) { tabscroll(‘.et_pb_tab_2 a’); }
    if (hash == ‘/our-members#arts-entertainment’) { tabscroll(‘.et_pb_tab_3 a’); }
    if (hash == ‘/our-members#stay’) { tabscroll(‘.et_pb_tab_4 a’); }
    });

    });

    thanks!

    1. Hi Trisha

      I am in the process of writing an article to show how to open an anchor or accordion from a different page. Due to the complexity of this article (and my own client deadlines) it is taking longer than I anticipated.

      If you need this solved sooner rather than later you are welcome to contact me directly to develop a custom solution. My details are on the About page.

Leave a Reply

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