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:
<script>
	jQuery(function($) {
		
		setTimeout(function(){
			
			var query = window.location.search.substring(1);
			var params = query.split('&');
			
			var accordion_id = '';
			var toggle_id = '';

			for (var i = 0; i < params.length; i++) {

				var param = params[i].split('=');
				
				if (param[0] !== undefined && param[1] !== undefined) {
					param[1] = decodeURIComponent(param[1]);
					
					if (param[0] === 'ao' && /^[a-zA-Z0-9]+$/.test(param[1])) {
						accordion_id = param[1];
					}
					
					if (param[0] === 'ai' && /^\d+$/.test(param[1])) {
						toggle_id = param[1];
					}
				}
			}
			
			if (accordion_id !== '' && toggle_id !== '') {
				$('#'+accordion_id+'.et_pb_accordion .et_pb_toggle:nth-of-type('+toggle_id+') .et_pb_toggle_title').trigger('click');
			}
	
		}, 100);
	});
</script>
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

10 Comments

  1. I have accordions within accordions in my site (made possible by inserting shortcode to the parent accordion). Is it possible to make a link that opens a parent accordion, then the child one within the parent accordion and scroll to the right place?

    Inception lol

    Reply
    • Hey Tatu, I haven't had a chance to try it yet, but the code above ultimately just simulates a click on the accordion title, so I think you should be able to open the child by:

      1) Adding a second copy of the code
      2) Changing the parameter names (i.e. where you see "param[0] === 'ao'" and "param[0] === 'ai'" in the code) to, say "co" and "ci",
      3) Using these parameter names in the URL, alongside the old – something like: https://www.mysite.com/mypage/?ao=myaccordion&ai=3&co=childaccordion&ci=1
      4) Increasing the timeout in the third last line (i.e. this bit "}, 100);". The 100 is in milliseconds, but you'll need to wait for the parent to do its opening animation – maybe set to 1000 (i.e. 1 second) and adjust up or down as needed.

      For scrolling to the correct place, using the module id as the hash will probably only work on the parent accordion. If that won't cut it, let me know. Thanks!

      Reply
  2. 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
  3. 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
  4. 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
  5. 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 *