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
To add a class to a link in a WordPress menu, you can instead do this:
- In your WordPress dashboard, go to "Appearance > Menus".
- Click on "Screen Options" at the top right of the page and ensure the "CSS Classes" option is checked.
- In your menu, expand the menu item you want to edit. You'll see an option to add a "CSS Classes (optional)" field. Enter your desired class name.
- Click "Save Menu" to apply your changes.
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, I just want to thank you for this article. I've implemented and it's working well. My Question is about scrolling to the accordion's location. I gave a reference through the navigation menu's custom link option and there is no CSS ID for that. How can I add a custom link "disable_click_handlers" as a class? Is there anyway I can do this?
Hi Elvan, to add the "disable-click-handlers" class to a link in a WordPress menu, you can:
Note that "disable-click-handlers" should have dashes, rather than underscores – I've just corrected this in the post.
Hopefully that does what you need, but let me know if it doesn't work or if I've misunderstood what you're trying to do. Thanks!
Hey Dan,
I encountered the same issue as Emily, and I found an issue with your instructions…
The JS for the unblind click, you have identified the CSS class as:
disable-click-handlers
But you identify the button CSS class as:
disable_click_handlers
I changed the underscroes to dashes and everything worjed great. Thank you for a great solution to my issue.
Thank you, Bill! I've updated the post to correct this – much appreciated!
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!