Anchor links in hidden divs

Question

Because I am working with a very limited and old CMS, I don't have many options. I hope this is possible:

I have a page with 4 divs. The first one is always visible and the other ones are hidden through the class faded-in and faded-out. With a mouse over function, visitors can make the others visible with hover. The current active div fades into the new one. So far so good. (This is done with plain javascript as the jQuery on the site is very old, and I cannot update it).

What I need now is the ability to link to the other divs from other pages. I have tried the following:

Making a toggle function in javascript to hide/show the relevant div. I tried to call this function from the other page, but it seems impossible. Is there another way for this? Let me know if you need more details.

I used the search function and found some "anchor links in hidden elements" topics, but because they are in a different situation, the solution does not apply to me sadly!

HTML code with the divs:

    <div snippet="switcher">
  <ul class="text-options ">
    <li class="col text-topic selected"><a class="dark" data-role="option-picker">Div 1</a></li>
    <li class="col text-topic"><a class="dark" data-role="option-picker">Div 2</a></li>
    <li class="col text-topic"><a class="dark" data-role="option-picker">Div 3</a></li>
  </ul>
<div class="panels rel">
      <div class="z-med faded-in" style="flex-direction: row; margin-top: 500px;">
            <p>This is div 1</p>
        </div>

        <div class="z-low faded-out" style="flex-direction: row; margin-top: 500px;">
            <p>This is div 2</p>
        </div>

        <div class="panel relative cols-reversed z-low faded-out" style="flex-direction: row; margin-top: 500px;">
            <p>This is div 3</p>
        </div>

</div>
</div>

The fade JS:

<script>
    jQuery(function () {
      var button = '[data-role="option-picker"]',
          snippet = '[snippet]',
          fadedOut = 'z-low faded-out',
          fadedIn = 'z-med faded-in';

      jQuery(button).on('mouseover', function (event) {
        var $this = jQuery(this);
        var $snippet = $this.closest(snippet);
        var $panels = $snippet.find('.panel');
        var index = $this.parent().index();

        event.preventDefault();
        event.stopPropagation();
        $panels.filter('.faded-in').removeClass(fadedIn).addClass(fadedOut);
        jQuery($panels.get(index)).removeClass(fadedOut).addClass(fadedIn);
        $snippet.find(button).parent().removeClass('selected');
        $this.parent().addClass('selected');
      });
    });
  </script>

Sorry for messing up the alignment, the cms is horrible (uses basic html text blocks).

Answer 1

You can add fragment to the URL identifying which div should be visible. Something like this:

www.mysite.com/pagewithfourdivs.html#div3

And then, on page load, you can read the fragment value (eg #div3 ) from window.location.hash and hide/show the divs accordingly.