Question

I am looking for a way to deep link div blocks. On a particular page I might have several div blocks each with its own contents. One of this blocks is visible, others are hidden. Once a link or a button is pressed the corresponding div is shown and others are hidden. Here is the HTML for the divs:

<div id="6ba28aae2dae153a1686cfee276632d8" class="page-block" style="display: block;">
    <p>
    1st block. 
    </p>        
</div>
<div id="55cead0effa915778913d8667d0ae3a9" class="page-block" style="display: none;">
    <p>
    2nd block. 
    </p>
</div>

And here is the JavaScript used to switch the blocks.

/* Hide and show necessary blocks. */
function switchBlocks(UID)
{
    var blocks = $('div.page-block');

    for (i=0; i<blocks.length; i++) 
    {
        if (blocks[i].id == UID) 
        {
            blocks[i].style.display= 'block';

            // Get the current URL and split it at the # mark
            urlArray = window.location.href.split("#");
            // Select the part before #
            subURL = urlArray[0];
            // Create a fake URL by adding UID to subURL
            history.pushState(null, null, subURL + '#' + UID);
        } 
        else 
        {
            blocks[i].style.display= 'none';
        }
    }
}

What I am trying to do now is assign each block its unique URL by using the blocks ID. I am able to update the URL with the relevant ID yet can’t figure out how to link the particular URL to a specific block so that the corresponding block is shown when accessing its URL.

I have studying the tutorial on the HTML5 History API but can’t quite figure out how to apply it to my case.

Answer 1

if(window.location.hash == "#55cead0effa915778913d8667d0ae3a9")
{
 $("div.page-block").hide();
 $("div#55cead0effa915778913d8667d0ae3a9").show();
}

or

hash_id = window.location.hash;
if(hash_id.length > 0)
{
 $("div.page-block").hide();
 $(hash_id).show();
}