title: jQuery/JavaScript: Triggering a click function on same-page anchors
body: <p>A website I'm developing has a list of links in the footer on every page. These links are appended with anchors like so:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="lines exp"&gt;&lt;a href="services.html#sa"&gt;Service A&lt;/a&gt;&lt;/li&gt;
      &lt;li class="lines exp"&gt;&lt;a href="services.html#sb"&gt;Service B&lt;/a&gt;&lt;/li&gt;
      &lt;li class="lines exp"&gt;&lt;a href="services.html#sc"&gt;Service C&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;div id="sa" class="toggle-trigger"&gt;
      &lt;h3 class="services-title"&gt;
          &lt;a class="toggle-text"&gt;Service A&lt;/a&gt;
      &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="toggle-container"&gt;
      &lt;p&gt;Lorem ipsum sit dolorem.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="sb" class="toggle-trigger"&gt;
      &lt;h3 class="services-title"&gt;
          &lt;a class="toggle-text"&gt;Service B&lt;/a&gt;
      &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="toggle-container"&gt;
      &lt;p&gt;Lorem ipsum sit dolorem.&lt;/p&gt;
  &lt;/div&gt;
  &lt;div id="sc" class="toggle-trigger"&gt;
      &lt;h3 class="services-title"&gt;
          &lt;a class="toggle-text"&gt;Service C&lt;/a&gt;
      &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="toggle-container"&gt;
      &lt;p&gt;Lorem ipsum sit dolorem.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $( 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');
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>I added the second function since the <code>result</code> variable in the first function is always null when clicking anchored links within the same page.</p>
  
  <p>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.</p>
  
  <p>Desired behavior is of course for it to work the same, regardless of the page on which the footer link is clicked.</p>
  
  <p>What am I doing wrong?</p>