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>Related Post: Adding JavaScript / jQuery to Divi.
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>Related Post: Adding JavaScript / jQuery to Divi.
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.
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 : )
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!