How to use anchor links to open accordions and toggles in Divi

Have you ever wanted to link to a specific Divi accordion or toggle and/or have a link that would automatically open that item? Us too! Unfortunately, it’s not as straightforward as you would think, but fortunately for you, we found a way to do it! This quick tutorial will help you link to a specific accordion or toggle item and automatically open that item for you in just 3 simple steps! Let’s get to it…

step 1:

Copy the following code into Divi > Theme Options > Head section, as illustrated below:

[php]
<!– Automatically Open Accordion or Toggle from Anchor Link –>
<script>
(function($){
let hash = ”;
function doClasses(url){
hash = url;
let target = ‘.’ + hash,
module_check = hash.split("_");
if(module_check[2] == ‘accordion’ || module_check[2] == ‘toggle’){
if(!$(target).hasClass(‘et_pb_toggle_open’)){
$(target).toggleClass(‘et_pb_toggle_open et_pb_toggle_close’);
$(target).siblings(‘.et_pb_accordion_item’).removeClass(‘et_pb_toggle_open’).addClass(‘et_pb_toggle_close’);
}
}
if((module_check[1] == ‘advanced’ && module_check[2] == ‘tab’)){
$(target).click();
}
}
function scrollToElement(el){
let elementTop = $(‘.’ + el).offset().top,
headerTop = 90;
if($(‘body’).hasClass(‘et_fixed_nav’)){
headerTop = $(‘header’).height() + 90;
}
let scrollTo = elementTop – headerTop;
$(‘html, body’).animate({scrollTop: scrollTo + "px"}, 300);
}
function loadToggle(){
if( window.location.hash.slice(1) && (window.location.hash.slice(1).includes(‘accordion’) || window.location.hash.slice(1).includes(‘toggle’) )){
doClasses(window.location.hash.slice(1));
scrollToElement(window.location.hash.slice(1));
}
}
function clickToggle(){
$(‘a.et_pb_button’).click(function(e){
const href = $(this).attr(‘href’),
splitHref = href.split(‘#’),
postHref = splitHref[1];
doClasses(postHref);
scrollToElement(postHref)
});
}
$(document).ready(function(){
loadToggle();
$(‘a.et_pb_button’).off();
clickToggle();
});
})(jQuery)
</script>
[/php]