Open a Particular Accordion Module Item by Linking

|

The Divi 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". 

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.

Scroll to the Accordion's Location

If you'd like to also have the page scroll to the location of the accordion, you can do so by adding the accordion module's id as a hash to the URL, giving:

https://www.mysite.com/mypage/?ao=myaccordion&ai=3#myaccordion

If you want to include the link in this form on the same page as the target accordion (e.g.in a button module), note that Divi may intercept clicks on the link and try to scroll directly to the accordion without opening the accordion item.

To solve this, first add "disable_click_handlers" as a class to the button or link. In the case of the button module, you can add the class at:

Button Settings > Advanced > CSS ID & Classes > CSS Class

Then add the following jQuery to your site: 

<script>
jQuery(function($){
	$('.disable-click-handlers').unbind('click');
});
</script>

You can add the jQuery at:

Divi > Theme Options > Integration > Add code to the head of your blog

Now the link should work correctly even if it is on the same page as the accordion.

35 Comments

  1. Hi, just wanted to thank you so much and let you know I've implemented on a client's site and it's working well. The only issue I'm still have is that the page refreshes when each link is clicked before scrolling. Is there anyway to avoid this? https://www.eatlocalmonth.com.au/tours-and-packages

    Many thanks : )

    Reply
    • Hey Emily, I'm glad it's working for you. I took a look at the page you linked to, but it seems to have been removed – I just get a "No Results Found" page now. If you're still using the code / experiencing the page refreshing issue, are you able to send through the current URL of the page? I had a bit of a look round the site, but couldn't seem to find it. Thanks!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.