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:

<!– Automatically Open Accordion or Toggle from Anchor Link –>
let hash = ”;
function doClasses(url){
hash = url;
let target = ‘.’ + hash,
module_check = hash.split("_");
if(module_check[2] == ‘accordion’ || module_check[2] == ‘toggle’){
$(target).toggleClass(‘et_pb_toggle_open et_pb_toggle_close’);
if((module_check[1] == ‘advanced’ && module_check[2] == ‘tab’)){
function scrollToElement(el){
let elementTop = $(‘.’ + el).offset().top,
headerTop = 90;
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’) )){
function clickToggle(){
const href = $(this).attr(‘href’),
splitHref = href.split(‘#’),
postHref = splitHref[1];

step 2:

Use inspect element to find the ID of the accordion or toggle item you want to link to. It will either be displayed as et_pb_accordion_item_# or et_pb_toggle_#. The hashtag at the end of those simply represents a number that will change, depending on the ID of the accordion or toggle you wish to link to.

step 3:

Format your URL to include the ID from Step 2. It will look something like the example below. Note the hash tag after the forward slash and before the accordion or toggle ID. This is what makes is an anchor link to the item you wish to link to.

Sample accordion URL: https://your-website-url/#et_pb_accordion_item_#
Sample toggle URL: https://your-website-url/#et_pb_toggle_#

If you want a shortcut to finding the URL without using inspect element every time, simply start with 0 and count the set of accordions or toggle items to determine the ID. Plugin that into the sample above and you’re good to go! Keep in mind that if you move around your accordion or toggle items that this will change the ID number of the item you’re linking to.

We hope this tutorial was helpful to you! Be sure to comment below and let us know where you’ve implemented this, we’d love to check it out! ✌️

  • Sylvain
    June 29, 2021

    This turn around work fine … thanks !!

  • Filip
    September 16, 2021


    Thanks for the code!

    I’m trying to use it as menu item anchor links, not as a button.

    For that, I had to change one line of the code:




    But now it doesn’t work on mobile. Can you help, please?


    • Brant Barton
      September 16, 2021

      Can you please let us know which menu item you’re trying to click and which toggle should be opening?


  • SL
    March 16, 2022

    This isn’t working for me. Has anything changed?

    • Brant Barton
      June 28, 2022

      Hi there,
      This should still be working. Can you please provide the site where you’re trying this with the code inserted?

  • Tahir
    May 13, 2022

    Great one. But I am trying to link it from the module link. It’s not working.

    The link is being changed in the address bar but it’s not moving to the accordion.

    Can anyone help?

    • Brant Barton
      June 28, 2022

      Hi Tahir,
      Can you please provide the site where you’re trying this with the code inserted?


Talk It Out.

Leave A Comment