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>

What's your question? You asking how to run some code when the page loads? Looks like you already know how to do that, so I'm not sure what the issue is. — , Jul 07 '15 at 20:26

score 5 · Accepted Answer · answered Jul 07 '15 at 20:28

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';

  });
});

Daniel Beck · Answer 2 · 2015-07-07T20:38:05.080

1

One strategy:

Have index.html link to http://sample.com/products.php#shoes (a plain old <a href="/products.php#shoes"> will do, no need for a jQuery click event here.)
Have products.php check document.location.hash for '#shoes' and trigger $('#shoes').show() if present.

edited Jul 07 '15 at 20:38

answered Jul 07 '15 at 20:29

Daniel Beck

20,653
5
38
53

score 1 · Answer 3 · edited May 23 '17 at 12:08

jQuery's .click() without any arguments, fires the click event on that element, so in the very simplest of solutions, if the user's coming to the products page by clicking the shoes link, add a query string to the end (/products.php/?q=shoes)

and then in the javascript in the product page, if it sees that there's a product needed, it can auto trigger the click event on whatever element on that page you're supposed to click on to make it show up.

This question has an example of how to pull parameters out of a URL with jQuery.

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}

score 1 · Answer 4 · answered Jul 07 '15 at 20:33

Read about Location hash

At your link in index.html

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

And in your products.html script :

$(document).ready(function() {

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

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

  if ( location.hash != 0 && location.hash == '#shoes' ){
     $('a[href$=shoes]').trigger('click');
  }
});

When you have a location.hash target to an element called #shoes in your products.html, the script will trigger the event button 'click' to reveal your awesome shoes.

Michael Palermo · Answer 5 · 2015-07-07T20:46:32.433

Add one line of code as indicated below:

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

  // add this line...
  $(window.location.hash).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>

Go to http://codepen.io/palermo4/pen/KpoGdY to test

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

products.html

index.html

5 Answers5

Linked