jQuery anchor links toggling a menu?

I used jQuery to make a toggle menu where someone can click on different span titles to toggle between different containers of content (on the website, this toggle menu toggles between different contact forms). The menu works, but I am trying to make it so that if a user clicks an anchor link on a different page, they will be sent to this page and the menu will automatically toggle to the corresponding container of content.

For example, if someone were to click on an anchor link like “mydomain.com/test-page/#third”, I would want the content from the third menu item to toggle and show automatically when the page loads. I have been playing around with using “window.location.hash” to trigger a click event like this, but can’t figure it out.

Is there a way to trigger a click event when the page url has a certain anchor hash like this at the end of it?

Would really appreciate any help folks can offer!

Here is the fiddle: https://jsfiddle.net/ecv5jwsr/

$(function() {
  $('#toggle > span').click(function() {
    var ix = $(this).index();

    $('#left').toggle(ix === 0);
    $('#second').toggle(ix === 1);
    $('#third').toggle(ix === 2);
    $('#four').toggle(ix === 3);

    $("a[href='" + window.location.hash + "']").parent("#test").click();
  });
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="container text-center">
  <!-- the toggler -->
  <div class="row">
    <div class="col-12">
      <p id="toggle">
        <span><a href="#" id="test">TITLE 1</a></span>
        <span><a href="#" id="test">TITLE 2</a></span>
        <span><a href="#" id="test">TITLE 3</a></span>
        <span><a href="#" id="test">TITLE 4</a></span>
      </p>
    </div>
  </div>
</div>
<!--container -->
<div class="container p-5 contact-page-forms">
  <div class="row pl-md-5 pr-md-5">
    <div class="col-12 pt-4">
      <div id="left">
        <h3>Content 1</h3>
      </div>
      <div id="second">
        <h3>Content 2</h3>
      </div>
      <div id="third">
        <h3>Content 3</h3>
      </div>
      <div id="four">
        <h3>Content 4</h3>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer

To do this you need to set tab id and save it in url as parameter like this:

        $(function () {
            let url = new URL(window.location);
            let tab = (url.searchParams.get("tab") == null ? 'left' : url.searchParams.get("tab"));
            url.searchParams.set('tab', tab);
            history.pushState({}, null, url);
            $(`.col-12.pt-4 div`).addClass('hide');
            $(`.col-12.pt-4 #${tab}`).removeClass('hide');

            $('#toggle > span').click(function () {
                let tab = $(this).attr('for');
                $(`.col-12.pt-4 div`).addClass('hide');
                $(`.col-12.pt-4 #${tab}`).removeClass('hide');
                let href = $(this).find('a').attr('href');
                let url = new URL((href == '#' || href == '' ? window.location : href));
                url.searchParams.set('tab', tab);
                history.pushState({}, null, url);
                //window.location.href = url;
            });
        });

.col-12.pt-4 .hide {
            display: none;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container text-center">
        <!-- the toggler -->
        <div class="row">
            <div class="col-12">
                <p id="toggle">
                    <span for="left"><a href="#">TITLE 1</a></span>
                    <span for="second"><a href="#">TITLE 2</a></span>
                    <span for="third"><a href="#">TITLE 3</a></span>
                    <span for="four"><a href="#">TITLE 4</a></span>
                </p>
            </div>
        </div>
    </div>
    <!--container -->
    <div class="container p-5 contact-page-forms">
        <div class="row pl-md-5 pr-md-5">
            <div class="col-12 pt-4">
                <div id="left" class="hide">
                    <h3>Content 1</h3>
                </div>
                <div id="second" class="hide">
                    <h3>Content 2</h3>
                </div>
                <div id="third" class="hide">
                    <h3>Content 3</h3>
                </div>
                <div id="four" class="hide">
                    <h3>Content 4</h3>
                </div>
            </div>
        </div>
    </div>

Advertisement

Answer