With click, navigate to another page and open a div hidden by javascript

Question

I have two pages. Lets call the first page index.html and the second page products.html.

On products.html I have a div that is hidden unless the user clicks a button to reveal it, as shown below:

products.html

$(document).ready(function() {
  
  $('.product-highlight').hide();
  
  $('a[href$=shoes').click(function() {
    $('#shoes').show();
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="product">
  <img src="http://placehold.it/100x100"/>
  <a href="#shoes">Show Shoes</a>
</div>

<div class="product-highlight" id="shoes">
  <p>These are the shoes</p>
</div>

Now on my index.html I have a link that should directly lead to the shoes tab and have it revealed.

So far all I know how to do is:

index.html

$(document).ready(function() {
  
  $('a[href$=shoes]').click(function() {
    
    window.location.href= 'http://sample.com/products.php/';
   
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#shoes">Take me to the shoes</a>

Answer 1

You can make use of :target pseudo-class. For this define next CSS rules:

#shoes {
    display: none; /* hide by default */
}
#shoes:target, /* and show either if class show is present (on click) */
#shoes.show {  /* or location hash matches id "shoes" */
    display: block;
}

and in JS you would add class show:

$(document).ready(function() {

  $('.product-highlight').hide();

  $('a[href$=shoes').click(function() {
    $('#shoes').addClass('show');
  });

});

When redirecting from index page you would also need to set a hash #shoes:

$(document).ready(function() {

  $('a[href$=shoes]').click(function() {

    window.location.href= 'http://sample.com/products.php/#shoes';

  });
});