jQuery/JavaScript: Triggering a click function on same-page anchors

Question

A website I'm developing has a list of links in the footer on every page. These links are appended with anchors like so:

<ul>
    <li class="lines exp"><a href="services.html#sa">Service A</a></li>
    <li class="lines exp"><a href="services.html#sb">Service B</a></li>
    <li class="lines exp"><a href="services.html#sc">Service C</a></li>
</ul>

On the "services.html" target page for these links, there is a series of toggle-style divs each corresponding to the above anchored links, like so:

<div id="sa" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service A</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sb" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service B</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>
<div id="sc" class="toggle-trigger">
    <h3 class="services-title">
        <a class="toggle-text">Service C</a>
    </h3>
</div>
<div class="toggle-container">
    <p>Lorem ipsum sit dolorem.</p>
</div>

The ultimate goal is to have the footer links activate their target "toggle-trigger" div with a simulated click event, which will toggle open the associated "toggle-container" div after loading the "services.html" page.

To this end, I've added the following JavaScript / jQuery to "services.html" at the end of the body, since it should only fire once the page is ready:

<script type="text/javascript">
    $( document ).ready(function() {
        var target = document.URL;
        var regex = /services\.html#[a-z]{2}$/;
        var result = regex.exec(target);
        console.log("Target / Regex / Result: " + target + " / " + regex + " / " + result);
        if (result) {
            var divID = /#[a-z]{2}/.exec(result);
            console.log("divID: " + divID[0]);
            $(divID[0]).delay(1000).trigger('click');
        }
    });
    $(".exp").click(function() {
        var target = window.location.hash;
        console.log("Target: " + target);
        $(target).delay(1000).trigger('click');
    });
</script>

I added the second function since the result variable in the first function is always null when clicking anchored links within the same page.

Currently, this works exactly the way I want it to when clicking a footer link on other site pages. However, when I am already on the "services.html" page and click one of the footer links on the same page, it doesn't work the first time I click but instead works the second time the anchored link is clicked.

Desired behavior is of course for it to work the same, regardless of the page on which the footer link is clicked.

What am I doing wrong?

Answer 1

The way I see it... when you are already on the services.html page, something behaves badly. This could be the href="services.html#sa". Although I don't know what exactly could be wrong, I would recommend retrieving your "#anchor" differently.

Something like

$(".exp").click(function(){
  $a = $(this).find("a").first() ;
  href = $a.attr('href') ;
  // parse the href to retrieve #anchor
}) ;

This way, you wouldn't depend on window.location... which may behave badly when you are already on services.html.