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 ($) {
    $('#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);
    $('#open-tab-dance a').on('click', function(event){
        $('#my-tabs .et_pb_tabs_controls .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).


  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. Thanks.

      Your portfolio scenario is probably very possible. When I have a moment I will see if I can write up a how to.

        1. Hi Carly, not as yet I’m afraid. If you really need the feature you’re welcome to hire me but right now I just don’t have the capacity.

    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 ($) {
    $(‘#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?



    1. Hi Hannah, good question. Based on what you have posted it should work, but I will take a look and confirm this for you.

      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 😉



        1. Thanks Hannah. Sorry that I haven’t got to this yet, it’s been a busy few weeks.

          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!

    1. This is how I got it to work for a Toggle.

      I placed this script in the Integration area of Divi (in the section):

      jQuery(function ($) {
      $(‘#openmenu a’).on(‘click’, function(event){
      $(‘#menu .et_pb_toggle_0 .et_pb_toggle_title’).click();
      $(“html, body”).animate({ scrollTop: $(‘#menu’).offset().top }, 1000);

      Here is a key for each of my CSS ID codes:
      #openmenu = The module ID where the link is location.
      #menu = The section ID where the toggle is located

  7. Hi,
    Thanks for this code. Is that possible to do that from another page?
    (i.e. Homepage)

    1. Hi Daniel, see my earlier comment to Mike. I’ll try to write up a tutorial shortly.

  8. 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!

    1. Hi Josh, unfortunately I have been swamped with work lately, so haven’t had much time to play with my Divi tutorials.

  9. 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.

  10. Hey, Jonathan!

    Seems like the demo page doesn’t work and I can’t get the accordion to work myself using the code.
    Is the solution still actual?

    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.


      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!

  11. 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.

  12. 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.

  13. 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.


  14. 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.


  15. 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? (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’); }



    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.

  16. Hi,

    this is exactly what I need however my Divi theme is not importing the json file …

    I get :
    This file should not be imported in this context.

    any idea how to “fix” this?

    thanks in advance

  17. Hi Jonathan,

    I figured it out, by importing it in a new page instead of trying to import it as a divi layout..

    it works great, thank you so much!

    One more thing, would you know why the mouse cursor do not transform as it does for any other links? I wonder if the people browsing the site would figure this is a link..

    see here for example:

    by the way, thanks again for the lightning fast response! 🙂

    1. No problems.

      Yes, you can change the pointer style for the anchor tag element. So in the example url you posted above the following should work for the accordion anchor

      #open-accordion-dance a {

      1. ok… I wish I had better skills because I tried several ways and can’t find where to insert this precisely…

        in the custom CSS of the theme? I tried with no luck
        I tried also in the custom CSS of the module and … still… :-/

        thanks again for your help, it is REALLY appreciated.

        1. Hi Alex, you should be able to insert it into the Custom CSS area in the Divi theme options or in your child theme style.css

  18. I was curious if you know how on the Tabs module when you click a tab Title, it autoscrolls up to reveal all of the tabs content?

    1. Hi Ray, if you look at the JavaScript I posted for the tabs, it is this line

      $(“html, body”).animate({ scrollTop: $(‘#my-tabs’).offset().top }, 1000);

      You can read more about jQuery’s animate function here :

      1. Jonathan, thanks for the response, So I get the basic logic here but I’m not savvy on javascript…so I’m now 100% sure how to implement it… So I assigned the entire tabs Section a css ID of “tabs”, There are 4 tabs within the section. I understand each tab is “et_pb_tab_0” thru “et_pb_tab_4” But I’m not sure what the #ID of each tab is? Which the script seems to need…..Also where do I put the javascript code, Divi has that code module, I tried to add it there in th esame section as the tabs but it doesn’t affect the tabs…I went and added it to the Head via the theme customizer and it still didn’t work. Any help would be sooo much appreciated….I’m so lost….

        1. Hi Ray.

          In JavaScript (specifically jQuery, which is what I am using) you can access an element by it’s ID, it’s class, it’s HTML tag or a combination of all three, using the same notation you would in CSS. So ‘#my-tabs’ refers to the ID of the tabs module and ‘.et_pb_tab_1’ refers to the class of the second tabbed element.

          If you wanted to trigger the third tabbed element you would do it like this

          $(‘#my-tabs .et_pb_tab_2 a’).click();

          So that means, find the element with the id ‘my-tabs’, which contains and element with a class ‘et_pb_tab_2’, which itself contains an HTML element ‘a’ (or an anchor tag) and trigger it’s click event.

          All you want is the anchor, but you need to specify which anchor, which you do by specifying where it is located, based on it’s parent elements.

          As to where to put the JavaScript, I reference this in the article itself “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).”

          It might help you to read up on how CSS selectors work ( as well as the basics of jQuery (

  19. Hi Jonathan, thanks for the super helpful post. Sorry if this is obvious to everyone but me, but can you clarify the steps for setting up the CSS ID and the href in their respective Divi modules? Using my three-tab example below, in my Tabs module Custom CSS tab, I would set the CSS ID of the Tabs module to tabs. Then in the linking module (in my case a Blurb), I would set the URL to #open-tab-first in order to open the first tab. Is this correct?

    jQuery(function ($) {
    //tab 1
    $(‘#open-tab-first a’).on(‘click’, function(event){
    $(‘#tabs .et_pb_tab_0 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#tabs’).offset().top }, 1000);
    //tab 2
    $(‘#open-tab-second a’).on(‘click’, function(event){
    $(‘#tabs .et_pb_tab_1 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#tabs’).offset().top }, 1000);
    //tab 3
    $(‘#open-tab-third a’).on(‘click’, function(event){
    $(‘#tabs .et_pb_tab_2 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#tabs’).offset().top }, 1000);

    Also, I simply pasted the jQuery code into the CSS area of my child theme — is there something else to be done?

    Thanks again,

    1. Hi Jennifer

      It sounds like you have set up the ID properties correctly, however you need to add the JavaScript to the Divi Theme Options under Integrations not the Custom CSS area. You will also need to put it between script tags. See this article on how script tags work

  20. Hi Jonathan,

    the script works great. I have only one problem: on klick it opens an item of the accordion, but scrolls to the top of the accordion instead of the open item. I have al lot of items, so the open item often isn’t visible without scrolling.

    Thank you

    1. Hi Dieter

      The important line in the jQuery is this one: $(“html, body”).animate({ scrollTop: $(‘#my-accordian’).offset().top }, 1000);

      What that is doing is scrolling to the top of the element with the id ‘my-accordian’. So what you would need to to is change that to select the accordion item you want to scroll to.

      For example if you wanted to scroll to the second accordion

      $(“html, body”).animate({ scrollTop: $(‘#my-accordian .et_pb_accordion_item_1’).offset().top }, 1000);

      1. I tried using
        $(“html, body”).animate({ scrollTop: $(‘#my-accordian .et_pb_accordion_item_1’).offset().top }, 1000);
        but it’s not working on my site. It doesn’t go to the second accordion

  21. Hi Jonathan,

    I must be the only person here who isn’t able to set this up correctly. I have added your script to the Divi Integration options, wish forces the tabs to display a URL, but then when I add an anchor to the page, it does nothing.

    Should I be linking directly to these URLs? Should the anchor just be href=”#” ?

    I’m not sure why this isn’t working for me. Example here:

    Many thanks for your help in advance,


    1. Hi Leanne

      The article describes how to open setup a page containing an accordion or tab so that when you click on an anchor tag outside of the accordion or tab it automatically opens that accordion or tab item.

      So what I don’t see on your page are the anchor tags to open the related tab.

        1. It will be easier for me to see the entire page in action, are you perhaps able to export the page layout with the links and email it to me at jonathanbossenger at gmail dot com?

          1. Hi Leanne

            Sorry, yes I’ve had a bit of a busy week on client projects. If you would like to hire me to do this for you, please use the Hire Me link in the site menu. This will direct you to my Codeable profile, where you can click the ‘Hire Jonathan’ to start a project with me.


  22. Hi Jonathan, great post! Thanks a lot. Didn’t find anything near my solution as this.

    I have been sitting with a problem for a couple of hours. I suppose if I were a better coder it would have been a simple thing to accomplish.

    But I wonder how I would do if I have 2 tabs and want two different anchor links link to each tab.

    My use case would be in the bottom of the tab and it would say “Visit next tab”. Then when you get to the next tab I’d have an anchor link in the bottom of that tab saying “Go back to the first tab”.

    I tried to just copy the first function and run the code twice but connect to two different anchor links. But unfortunately that didn’t work.

    I’d love to get your feedback on this.

    1. Hi Seif

      In order to do that you’re going to have to bind to the click event of your button, that triggers the opening of the tab you want to open. So lets say your button has a class ‘button’ and the tab you want to open has the class et_pb_tab_1, your jQuery would look something like this:

      $('.button').on('click', function(event){
      $('#my-tabs .et_pb_tab_1 a').click();

      Obviously this will be different depending on your page setup and the class names of your html elements.

  23. Thanks – this was perfect. I’ve managed to build a page where visitors can click on blurb pictures to go to a form embedded into an accordion – so that there’s a different form depending on the picture they click on. By setting the margin to 0px and hiding the icons on the accordion, it means that the only way to show a form is by clicking on the blurb.
    Couldn’t have done this without your insights and .js!

  24. Jonathan, thank you for sharing this.
    This is exactly what I was looking for, open a tab with the link.
    It worked fine and I adapted it to my site.
    If someone wants to use this way it worked perfectly for what I wanted.
    1-Inserted the JQuery script inside a CODE module, I think it is easier this way
    2-Replicated the script for 2 more tabs
    3-Removed the scrollTop line and instead pointed href=”#above-tab” to a DIVIDER module with a CSS ID above-tab.
    Now both things are done when clicking my button. It opens the tab and go to #above-tab.
    Could not do it without your help, I don’t know JQuery or JS.

  25. Hi Jonathon,

    I’m not a coder and this is doing my head in… I have an accordion with 7 items and I’ve applied your script but it only opens the first item (item_0 in my script. How do I go about coding in the other items in the accordion? They already have correct anchors elsewhere on the page (in a slider with button-url). Like I said, the first item opens but the other anchor links just scroll further down leaving the first item open.

    I’ve adjusted your script as follows (just the names have changed):

    jQuery(function ($) {
    $(‘#open-services-accordion a’).on(‘click’, function(event){
    $(‘#services-accordion .et_pb_accordion_item_0 .et_pb_toggle_title’).click();
    $(“html, body”).animate({ scrollTop: $(‘#services-accordion’).offset().top }, 1000);

    Any help at all will be appreciated.

    1. Rosie, change this line to open the item you want to open

      $(‘#services-accordion .et_pb_accordion_item_0 .et_pb_toggle_title’).click(); – opens item 0 (the first item)

      $(‘#services-accordion .et_pb_accordion_item_1 .et_pb_toggle_title’).click(); – opens item 1 (the second item)

      $(‘#services-accordion .et_pb_accordion_item_2 .et_pb_toggle_title’).click(); – opens item 2 (the third item)


      1. Hi Jonathan,
        Thanks for your reply. Sorry if I seem thick, but I can’t work out how to place the above rules inside the script to open the other items in the accordion. Do I have to copy and paste the whole script and change the the rule for items 1 through 7 like so:

        jQuery(function ($) {
        $(‘#open-services-accordion a’).on(‘click’, function(event){
        $(‘#services-accordion .et_pb_accordion_item_0 .et_pb_toggle_title’).click();
        $(“html, body”).animate({ scrollTop: $(‘#services-accordion’).offset().top }, 1000);

        jQuery(function ($) {
        $(‘#open-services-accordion a’).on(‘click’, function(event){
        $(‘#services-accordion .et_pb_accordion_item_1 .et_pb_toggle_title’).click();
        $(“html, body”).animate({ scrollTop: $(‘#services-accordion’).offset().top }, 1000);

        So every item has its own holder or do I incorporate the other item rules into one script? If so, how?

        Thanks once again for your patience!

        1. Rosie, it depends on what you want to achieve. Do you want all your accordions to be opened on the click of the one link, then the above will work.

          If you want to have multiple links that open different accordions, then you’ll also need to change the first line of the code block to match the CSS selector of each button. But in reality you probably need to extend the code so that it accepts variables from your clickable links/buttons, so that you can just have one code block to handle it all.

          1. Hi Jonathan,

            Thanks once again for your reply.

            I currently have a page with 7 different services. At the top of the page I have a slider with a slide for each service and beneath the slider I have placed an accordion with a tab for each service. What I would like to do if possible is place a button in each slide with a link to that particular service in the accordion so that the when the button is clicked the page scrolls down and that service opens.

            That would mean adjusting your script for each item in the accordion. So yes, multiple links but only one accordion with 7 items. If it can’t be done, no worries!

  26. Hi Jonathan,

    thank you so much for this. I am having a slight issue in that I want to use a menu link (that is common to every page of the site) to link to a tab on a page.

    I have inserted your code (from the zip download) into the Divi Integration options and added my-tabs to the CSS ID of the Tabs Module. Your explanation says to add it to the Row Module but your demo code seems to have a blank for the CSS ID in the Row Module.

    Then in the menu option I created a custom link with open-tab-mc (I changed this in the Integration code also). But this was auto-changed to http://open-tab-mc which of course failed.

    So I tried fully qualifying it including the page so which failed and then which opened the correct page but did not scroll down to the tabs or open one of them.

    What have I missed please?

    Huge thanks!

  27. Hi Jonathan,

    Thanks for this tutorial.

    I’m using a different theme/page builder than Divi and having issues getting this to work. Is the variable open_accordion_anchor specific to Divi?

    Here is the code that I added to the Javascript editing section of my theme:

    jQuery(function ($) {

    var open_accordion_anchor = $(‘#open-tab-discussions a’);
    open_accordion_anchor.on(‘click’, function(event){
    $(‘#product-page-tabs .wpc_comment_tab_tab a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#product-page-tabs’).offset().top }, 1000);


    #open-tab-discussions is the id that I assigned to the hyperlinked text to click up top, which is equivalent to the “Open Tab and Dance” text.

    #product-page-tabs is the ID that I assigned to the tabs div.

    .wpc_comment_tab_tab is the class of the tab I’m interested in opening.

    Do you see anything here that I’m doing incorrectly?

    Again, thanks so much for your tutorial!

    1. Nevermind…I just needed to add the around it. Thank you so much! I’ve been working so hard on figuring out a solution for this. I have absolutely zero knowledge of javascript, so to see this actually work is amazing to me.

      Have an awesome day!

  28. Hello, Thanks a lot for this article but it doesn’t work for me 🙁

    1 – I go to DIVI > OPTIONS > INTEGRATION and I put this code on the section

    jQuery(function ($) {
    $(‘#carte-cocktails a’).on(‘click’, function(event){
    $(‘#cartes .et_pb_tab_3 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#cartes’).offset().top }, 1000);

    2 – I put a link on my homepage to :

    3 – I put “cartes” on the CSS ID of the tab and all his parents section

    Where I do a mistake pleaaassseee ? I don’t understand !

    Thank’s a lot and have a nice day

  29. Hey Jonathan I got a question. I implemented your version and it works fine. But every time I click on the link the page jumps to the top, so I included the scroll you did to redirect it back to the tab. But still it shows a quick scroll up. Do you have any idea how I could fix that?


    1. Hi Vincenz, I’m afraid I don’t know why, there could be some other javascript causing the page to jump to the top. Without a url to see the problem it’s difficult to determine the reason.

  30. I can see there are posts speaking about a “tutorial” but i could not find it. can u please share? and.. also i notice “buy DiVi Plugins”, Well my WordPress site uses Elementor (yiag!) is there any solution for this? I just need to open certain tabs and so in the same page… any help?? THANKS A LOT Jonathan

  31. Hey Jonathan,

    I have been trying to implement this (without success) using an anchor link to jump to a specific slide on the Divi Slider module.
    Do you know if it would be possible to use this specific method to achieve this?

  32. Thank you Jonathan for this tutorial, I thought I am an experienced developper, but I got to realize that I am probably out of date. When I read your tutorial, it looks like telling everything I should know, but I can’t make it working. What would be the best way to learn more about it? Thanks again for beeing there.

    I really need to learn how to make links to a tab with DIVI. I’ll take all suggestions.

    1. René, perhaps if you could link to a page where you have tried this tutorial, but you can’t get it to work, then I should be able to guide you.

  33. Thank you Jonathan,

    Here is a link to the page I worked on. Https:/

    (The site is in french). It contains a tab module and what I am trying to do is to call the tabs from the menu.

    ********** I first add a Id to the module called Onglet-experience.
    ********** I had this code in the functions.js of the child theme:

    jQuery(function ($) {
    $( document ).ready(function() {
    // accordion
    if (typeof openers.accordion !== ‘undefined’) {
    var accordion_element = ‘#my-accordian .’ + openers.accordion + ‘ h5.et_pb_toggle_title’;
    $(“html, body”).animate({ scrollTop: $(‘#my-accordian’).offset().top }, 1000);
    // tab
    if (typeof !== ‘undefined’) {
    var tab_element = ‘#Onglet-experience .’ + + ‘ a’;
    $(“html, body”).animate({ scrollTop: $(‘#Onglet-experience’).offset().top }, 1000);
    var open_tab_anchor = $(‘#open-tab-recherchiste a’);
    open_recherchiste.on(‘click’, function(event){
    $(‘#Onglet-experience .et_pb_tab_1 a’).click();
    $(“html, body”).animate({ scrollTop: $(‘#Onglet-experience’).offset().top }, 1000);

    $('#open-tab-recherchiste a').on('click', function(event){
    $('#Onglet-experience .et_pb_tabs_controls .et_pb_tab_1 a').click();
    $("html, body").animate({ scrollTop: $('#my-tabs').offset().top }, 1000);


    ********** I had this code in the functions.php of the child theme:

    define( ‘PARENT_THEME_URL’, trailingslashit( get_template_directory_uri( ) ) );
    define( ‘CHILD_THEME_URL’, trailingslashit( get_stylesheet_directory_uri( ) ) );

    function divi_child_theme_enqueue_styles() {

    $parent_style = 'divi-style'; // This is the 'parent-style'.

    wp_enqueue_style( $parent_style, PARENT_THEME_URL . 'style.css' );
    wp_enqueue_style( 'divi-child-style', CHILD_THEME_URL . 'style.css', array( $parent_style ) );

    $functions_script = 'divi-child-functions';

    $data = array();
    if( isset( $_GET['et_open_accordion'] ) ){
    $data['accordion'] = $_GET['et_open_accordion'];

    if( isset( $_GET['et_open_tab'] ) ){
    $data['tab'] = $_GET['et_open_tab'];

    wp_register_script( $functions_script, CHILD_THEME_URL . 'functions.js', array( 'jquery' ), '1.0', true );
    wp_localize_script( $functions_script, 'openers', $data );
    wp_enqueue_script( $functions_script );

    add_action( ‘wp_enqueue_scripts’, ‘divi_child_theme_enqueue_styles’ );

    ********** I add a menu Item that point to https:/|1

    ********** The link brings me to the tab module’s page, but the first tab (0) active.

    I am afraid that there is at least one thing I don’t catch. What parameter is used to pass the tab index to be open? It is maybe the “a” witch is maybe the argument that manages it? ( ‘#Onglet-experience .’ + + ‘ a’; ). If it’s the case, I don’t really see where this is passed to the module.

    If you can help me. Even if you just tell me what silly thing I am not taking into account, I would be so graceful. It is true that my experience is based on older environnement like pure PHP, Laravel, Python, ABAP and VB and I am starting to use tools like WP ->DIVI. I begin to appreciate it. When using it with a rigorous method, it can become really helpful. And if a lot of brilliants younger people like you decided to do it this way, I will try to master it a little before to reject it. And I don’t think I will reject it if I can get it handson.

    Thank you again for your great work.

    1. Sorry I am french speaking and I realize that the word Graceful should be thankful instead. 🙂

  34. Does this code still work in new versions?

    I have been trying since the morning and nothing. I downloaded the file. I uploaded the json file and pasted the script code into Divi options, integrations. The page is displaying well but the link does not work. I use wordpress 5.3.2 and Divi 4.3.4

    1. Hey Esc, unfortunately it’s very possible this no longer works on latest versions. I’ll try and see if I can update it in the coming weeks.

  35. Can that be done in elementor? I am trying but can’t find same sort of selectors.

    1. Jay, that’s a very good question, it probably is possible, but one would need to use Elementor specific selectors. I’ll try to see if I can create the same example using Elementor.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: