Display/hide elements using location.hash

Question

I've got a navigation bars with five links and five divs. When I click the first link, the first div becomes visible and the rest are set to display: none. The same goes for the rest of them.

I want to let the visitor bookmark these dynamic "pages" (the visible divs) so I'm using the URL hash. But it's not working as I expected. For instance, it's not possible to browse directly to one specific state (where a specific div is displayed). If I'm not being clear, what I want to accomplish is the same as in this video, although without making use of the next and prev methods.

Here's a sample of my code.

<style>
    div { display:none; }
    div#intro { display:block; }
</style>

<ul id="pages">
    <li><a href="#intro">First link</a></li>
    <li><a href="#continue">Second link</a></li>
    <li><a href="#end">Third link</a></li>
</ul>

<div id="intro"></div>
<div id="continue"></div>
<div id="end"></div>>

<script>
    function toggle() {
        var i = 0,
        divs = document.getElementsByTagName("div"),
        hash = window.location.hash.substring(1); //extracts hash without #

        for (i; i < divs.length ; i++) {
            if (divs[i].id == hash) {
                $(divs[i]).css("display", "block");
            }
            else {
                $(divs[i].css("display", "none");
            }
        }
    }

    window.onhashchange = toggle;
</script>

side note: you can also use the CSS3 `:target` pseudo-class. — bwoebi, Jun 16 '13 at 09:28
Yes I see. Anyway I'm not sure I totally understand what you want... This? http://jsfiddle.net/kXCWW/ — Niccolò Campolungo, Jun 16 '13 at 09:37
And [this](http://jsfiddle.net/kXCWW/1/) is the jQuery version, if you already have it you can use it for your purposes, otherwise it is not necessary(if you're using it only for this little piece of code). — Niccolò Campolungo, Jun 16 '13 at 09:44
Yeah, that's what I've got so far. But one problem with that approach is that you can't bookmark the URL with the hash (you end up on the "first page" whatever the hash is), and you can't browse directly to different states. — , Jun 16 '13 at 09:47

score 0 · Answer 1 · answered Jun 16 '13 at 09:48

The problem is window.onhashchange is not supported by all browsers. In some browsers that do not support onhashchange, you may have to set up a timer to poll for changes in the hash. There is a library that does it for you: crossroad, you may take a look.

score 0 · Answer 2 · answered Jun 16 '13 at 10:17

Find the solution of this has been a little hard, but at the end I understood that the fastest way to do it was to fire the event manually. You can see the working fiddle here, this is the code(I had to use scrollTo plugin because I didn't know how to scroll to the elements, but you can adapt your script with window.scroll or with a few edits to the scrollTo plugin itself(it's very easy to understand, you can just do an animation with duration 0 to the element.top):

$(window).on("hashchange", function (e) {
    var hash = location.hash,
        divs = $('div'),
        element = $(hash);
    divs.hide();
    element.show();
    $(document.body).scrollTo(hash, {
        duration: 0
    });
});
$(document).ready(function () {
    var hash = location.hash;
    if (hash !== '') {
        $(window).trigger('hashchange');
    }
});

You can try it yourself just by adding /show/ after the jsfiddle's URL and then reloading the page with the hash already set.

Display/hide elements using location.hash

2 Answers2