Use anchor to display div

Question

I'm using jquery, and need to accomplish a couple things.

1) When someone clicks on a link (or in my case, a div) to display another div, I'd like to add an anchor to the url.

So, if someone clicks on a "Live" link, the 'live' div slides down, and we append #live to the url.

2) If someone visits that page and keeps the #live anchor at the end of the url, then the 'live' div should be visible right away.

I know how to handle the basic part of slideDown() if someone clicks a div. I don't know how to append the hashtag, or make it so that when the page is loaded that hashtag is checked and displays the respective div.

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

Answer 1

Appening a hash to the URL is as simple as manipulating location.hash, e.g.:

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

You can easily test for it's presence and act accordingly based on it's value when the page loads up, e.g.:

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