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

i have 2 pages. lets call first page index.html , second page products.html.

on products.html have div hidden unless user clicks button reveal it, 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 shoes</p>  </div>

now on index.html have link should directly lead shoes tab , have revealed.

so far know how 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 shoes</a>

you can make use of :target pseudo-class. define next css rules:

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

and in js add class show:

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

when redirecting index page need set hash #shoes:

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