Open a Particular Accordion Module Item by Linking

This post may contain referral links which may earn a commission for this site

The Divi Theme accordion module starts with the first accordion item open by default. If you'd like to be able to control which accordion item is opened when linking to the page, you can do so with the following jQuery code:
With this code in place, you can now change the link to a page such as https://www.mysite.com/mypage/ to https://www.mysite.com/mypage/?ao=myaccordion&ai=3 to open the third item of the accordion module with id "myaccordion". If you'd like to also have the page jump to the location of the accordion, you can do so in the usual way, by adding the accordion module's id as a hash to the URL, giving https://www.mysite.com/mypage/?ao=myaccordion&ai=3#myaccordion

You may also like to combine this with my tip on making accordions start closed to minimize the visual effect of the first accordion item being closed on page load.

Hundreds of new features for Divi
in one easy-to-use plugin

8 Comments

  1. Hello! Thank you for this helpful post! I am trying to set up a page in Divi with accordions, and I have successfully gotten the accordions to stay closed by hiding the first one with css code. I've also created a separate accordion module for each "pop-down" so that I can give them all separate ids. However, I'm having the same problem as Han – the JQuery to open the accordions only scrolls down the page, it doesn't open the accordions. I am not using a button, however. I set up a sidebar menu that has anchor links to each accordion. Any help would be much appreciated!

    Here's the link to the page I am creating: https://staging3.biblicalmissiology.org/?page_id=4492

    Reply
    • Hi Julianna, you should be able to use a similar technique to the one I suggested to Han. However, you need to modify it to remove the click handler from your sidebar links instead of the button. Try this:

      <script>
      jQuery(function($) {
      	setTimeout(function(){
      		$('#menu-articles a').unbind('click');
      	}, 100);
      });
      </script>
      

      Let me know if it doesn't help. Thanks!

      Reply
  2. Hi, great code, but my anchor link (text no button) also does not work when I link from the same page. It works properly if I link from another page.
    I guess my problem is more or less the same as Han's is. However, I would like to use a text link, not a button. Can you help me?

    Reply
    • Hi Martijn, did you get it working? I just tested out the links you have in your footer and they seem to be working correctly for me. Perhaps I'm missing something though? If so, perhaps you can give me talk me through the steps to reproduce the issue and also let me know what browser you're using? Thanks!

      Reply
  3. Where does the script go? Divi Options-Head? I can't get this to work. 🙁

    Reply
    • Hi Marna, it should work there, yes… any chance you're able to send me an example of one of your links so that I can try to figure out what's going wrong? Thanks!

      Reply
  4. Hi, found this snippet, thanks you for your useful code!
    It works very nice from other pages, but when I use the link from the same page, the accordeon does not open.
    Is there a solution maybe?
    Thanks in advance!

    Reply
    • Hi Han,

      I'm assuming you're using the link within a button module? Divi runs a bit of JavaScript code that intercepts button clicks and tries to scroll to the place on the page without the page being reloaded. However, this code ignores any parameters added to the page URL (such as by the above method) and overrides the URL. One option is to give your button an ID such as "mybutton" and add the following code alongside that given in the post:

      <script>
      jQuery(function($) {
      	setTimeout(function(){
      		$('#mybutton').unbind('click');
      	}, 100);
      });
      </script>
      

      This will deregister Divi's code for handling the click, and allow the link to work as intended. I hope it helps!

      Reply

Submit a Comment

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