Question

124

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

rated 0 times [ 131] [ 7] / answers: 1 / hits: 42575 / 9 Years ago, tue, july 7, 2015, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jazminkyrap

Add To Favorites

Follow

Total Points: 631

Total Questions: 89

Total Answers: 109

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

jazminkyrap questions

1 How to fix error: Fontconfig error: Cannot load default config file

Sat, Apr 17, 21, 00:00, 3 Years ago

1 How to return an attribute of clicked element in react?

Sun, Jul 5, 20, 00:00, 4 Years ago

1 why do I got Uncaught TypeError: response.text is not a function error when try to assignt body received as text to a variable in javascript

Sat, May 16, 20, 00:00, 4 Years ago

1 Error This line has a length of 182. Maximum allowed is 100 max-len

Thu, Apr 16, 20, 00:00, 4 Years ago

1 Selecting an html node's text content with htmlparser2 in Node.js

Mon, May 27, 19, 00:00, 5 Years ago

View All

answered 9 Years ago alonso · Accepted Answer

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



  });

});