CODEWITHSUNDEEP
javascriptjquery
Mr.Smithyyy
Mr.Smithyyy

Reputation: 1329

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

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>

Upvotes: 4

Views: 42776

Answers (5)

Michael Palermo
Michael Palermo

Reputation: 306

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

Upvotes: 1

Daniel Beck
Daniel Beck

Reputation: 21495

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.

Upvotes: 1

SerCrAsH
SerCrAsH

Reputation: 450

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.

Upvotes: 1

Dave Thomas
Dave Thomas

Reputation: 425

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];
        }
    }
}

Upvotes: 1

dfsq
dfsq

Reputation: 193291

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

  });
});

Upvotes: 5

Related Questions