Use snap to display div

Question

I am using jquery and I need to do a couple of things.

1) When someone clicks on a link (or in my case, a div) to display another div, I would like to add a binding to the URL.

So, if someone clicks on the "Live" link, the "live" div moves down, and we add #live to the URL.

2) If someone visits this page and holds the #live anchor at the end of the URL, then the “live” div should be immediately visible.

I know how to handle the main part of slideDown () if someone clicks on a div. I do not know how to add a hashtag or make the hashtag be marked when the page loads and displays the corresponding div.

Any help in understanding this would be greatly appreciated. Thanks in advance.

Answer 1

Adding a hash to the URL is as simple as manipulating location.hash , for example:

 $("a.live").click(function() { window.location.hash = 'live'; // not needed if the href is '#live' }); 

You can easily test its presence and act accordingly based on this value when the page loads, for example:

 $(document).ready(function() { var hashVal = window.location.hash.split("#")[1]; if(hashVal == 'live') { $("#live").show(); } }); 

Answer 2

If you had this markup:

 <a href="#div5" class="toggler">Toggle Div 5</a> <div id="div5">Content for Div 5</div> 

You can do it in jQuery:

 $("a.toggler").click(function() { $(this.hash).slideToggle(); }); 

Or use rel or something with the div you are clicking on, for example:

 <div rel="#div5" class="toggler">Toggle Div 5</a> <div id="div5">Content for Div 5</div> 

And tune your jQuery to this:

 $("div.toggler").click(function() { var hash = $(this).attr("rel"); $(hash).slideToggle(); window.location.hash = hash; }); 

My recommendation was to use display:block; anchored to do what you want and use the default browser behavior here, it takes care of the hash on click.

No matter which approach is above, you can show one on the page like this:

 $(function() { if(location.hash != "") { $(location.hash + ":hidden").slideDown(); } });