link to open accordion not working

[dave.collins1@mohawkcolle]

Trying to get a link on Source page to open an accordion on Target page.

The link itself on Source page is straightforward: //mysite.ca/source/#open-moderators

On target page //mysite.ca/target/, this is what I've done:

1. In the target accordion under CSS ID I have added open-moderators (no # symbol)
   
   
   
2. Added an HTML widget on the page:

<script>
jQuery(document).ready(function($){console.log("foo");
  var target = window.location.hash;
  if (target){setTimeout(function(){console.log(target);
      $(target).find('.elementor-tab-title').click();
      $([document.documentElement, document.body]).animate({
        scrollTop: $(target).offset().top - 100 // Adjust -100 for offset
      }, 500);
    }, 400);
  }
});
</script>

When I hit the page //mysite.ca/target/#open-moderators, it does trigger the code:
console.log outputs:
foo
#open-moderators

So the only thing that could be failing is the click itself. Have I borrowed bad code?

 

[AI Helper]

Your hash detection is fine — the weak spot is the selector you’re clicking. In Elementor Accordion/Toggle, the clickable header (.elementor-tab-title) is usually a sibling of the content panel, not a descendant of the wrapper you gave the CSS ID. So this part often returns nothing:

$(target).find('.elementor-tab-title').click();

Also, Elementor’s accordion uses ARIA attributes; it’s safer to click the specific title that controls the panel, and only if it’s not already open.

Before changing anything, take a quick backup (or at least copy the page content / export the template),since we’re editing front-end behavior.

Try replacing your script with this (put it in an HTML widget near the bottom of the target page, or better: Elementor Custom Code / your child theme):

<script>
jQuery(function($){var hash = window.location.hash;
  if(!hash) return;
  function openAccordion(){var $anchor = $(hash);
    if(!$anchor.length) return;
    // Find the nearest Elementor accordion/toggle item wrapper
    var $item = $anchor.closest('.elementor-accordion-item, .elementor-toggle-item');
    if(!$item.length) $item = $anchor;
    var $title = $item.find('> .elementor-tab-title, .elementor-tab-title').first();
    if(!$title.length) return;
    if($title.attr('aria-expanded') !== 'true'){$title.trigger('click');
    }
    $('html, body').animate({ scrollTop: $anchor.offset().top - 120 }, 500);
  }
  setTimeout(openAccordion, 600);
});
</script>

If it still won’t open, confirm the CSS ID is on the actual accordion item (not the whole accordion widget). If needed, share the target page HTML around that accordion item and I’ll tailor the selector to your exact markup/version of Elementor."""

 

[dave.collins1@mohawkcolle]

If it still won’t open, confirm the CSS ID is on the actual accordion item (not the whole accordion widget).

That did the trick!
Thank you!

 

[AI Helper]

Glad it’s working.

If you want to make it a bit more robust, you can also handle cases where the user lands on the page and then the hash changes (or they click another “open section” link without a full reload). You’d wrap the same openAccordion() logic in a hashchange listener:

<script>
jQuery(function($){function openFromHash(){var hash = window.location.hash;
    if(!hash) return;
    var $anchor = $(hash);
    if(!$anchor.length) return;
    var $item = $anchor.closest('.elementor-accordion-item, .elementor-toggle-item');
    if(!$item.length) $item = $anchor;
    var $title = $item.find('> .elementor-tab-title, .elementor-tab-title').first();
    if(!$title.length) return;
    if($title.attr('aria-expanded') !== 'true'){$title.trigger('click');
    }
    $('html, body').animate({ scrollTop: $anchor.offset().top - 120 }, 500);
  }
  setTimeout(openFromHash, 600);
  $(window).on('hashchange', function(){setTimeout(openFromHash, 50); });
});
</script>

If you keep this long-term, I’d move it out of an HTML widget into Elementor’s Custom Code (or a child theme) so it doesn’t get lost during edits. Always worth a quick test after Elementor updates since their accordion markup can shift.