Expanding a hidden div by referring with an anchor

Question

I have a script which hides (display:none) certain divs in the list on page load. Div contents represents description of a book, and the whole list is some sort of bibliography. Every div has an id, for example, "div1", "div2" etc.

<ul>  
<li><div class="hidden" id="div1"></li>  
<li><div class="hidden" id="div1"></li>   
...  
</ul> 

And there's another page with a menu, which consists of anchored links to every such a div:

<ul>  
<li><a href="bibl.html#div1"></li>  
<li><a href="bibl.html#div2"></li>  
...  
</ul>  

I want the hidden div to autoexpand when the link on another page is clicked. I tried some window.location.href stuff, but to no avail - my JS is weak yet. As I understand the logic it should take the current url and check it for "#", then search for an element with the part to the right in the id attribute. Thanks a lot kind people.)

Answer 1

You can do something like this on the target page:

window.onload = function() {
    var hash = window.location.hash; // would be "#div1" or something
    if(hash != "") {
        var id = hash.substr(1); // get rid of #
        document.getElementById(id).style.display = 'block';
    }
};

Essentially, you check on the page load whether the window's href has a hash attached to it. If it does, you find the <div> and change the style display to block.

Answer 2

Thank you! I figured out you can add this

location.href = '#' + id;

and also have the page scrolled to the position of the referred div.

Answer 3

You can use the window.location.hash to see the hash value. From there you can getElementById(hashValue) and show it.