Get #anchor for URL using jQuery ?

Question

jQuery(document).ready(function(){
    $("#red-products").hide();  
    $("#content-info").click(function(event){
        $("#red-products").hide();  
        $("#red-information").show(); 
    });

    $("#content-product").click(function(event){
        $("#red-information").hide();
        $("#red-products").show();  
    });

    $("#more").click(function(event){
        load(this.href);
        return false;
    });

});

As you can see, by default #red-products is hidden and #red-information is visible. Sometimes I want #red-products to be visible and #red-information hidden, meaning something like

http://localhost/networks2/profile.php?id=1&offset=1#products

to show #red-products and hide #red-information. And

http://localhost/networks2/profile.php?id=1&offset=1#information

to hide #red-products and show #red-information.

How can I read anchor from URL using jQuery, and hide/show appropriate sections?

Answer 1

You can change the initial hide to be based on window.location.hash, by replacing this:

$("#red-products").hide();  

With this:

$("#red-products, #red-information").hide();
$("#red-" + (window.location.hash.replace("#", "") || "information")).show();

This will hide both initially, then show the hasd (#red-hashhere), or default to showing #red-information as you have now.