Show/Hide Divs

JavaScript
6

Let’s start with an HTML page that has links and the divs.


<ul id="items">
    <li><a href="#apple">Apple</a></li>
    <li><a href="#banana">Banana</a></li>
    <li><a href="#grapefruit">Grapefruit</a></li>
    <li><a href="#noisy">Noisy</a></li>
    <li><a href="#watermelon">Watermelon</a></li>
</ul>
<div id="apple">
    <p><a href="http://lifehacker.com/5804509/how-to-split-an-apple-without-a-knife">How to Split an Apple Without a Knife</a></p>
</div>
<div id="banana">
    <p><a href="http://lifehacker.com/5349295/make-quick-ice-cream-with-only-frozen-bananas">Make Quick &#8220;Ice Cream&#8221; with Only Frozen Bananas</a></p>
</div>
<div id="grapefruit">
    <p><a href="http://www.npr.org/2011/04/18/135468567/repelling-bugs-with-the-essence-of-grapefruit">Repelling Bugs With The Essence Of Grapefruit</a></p>
</div>
<div id="noisy">
    <p><a href="http://www.youtube.com/watch?v=eHnnGHgeyC0">Noisy fruit and veggies - Synesthesia</a></p>
</div>
<div id="watermelon">
    <p><a href="http://www.bbc.co.uk/news/world-asia-pacific-13421374">China farmers face 'exploding' watermelon problem</a></p>
</div>

You don’t want the content to be invisible when someone visits with no scripting, so we’ll use scripting to hide the divs as the page is loading.


.hidden {
    display: none;
}

Scripts should be put at the bottom of the page, just before the </body> tag. That’s both for performance reasons, and because it allows us to work directly with page elements before the load event occurs.


...
<body>
    ...
    <script src="script.js"></script>
</body>
</html>

This script is attached to the tabs section, so that we can easily work with the clicked link:


tabs.onclick = function (evt) {
    evt = evt || window.event;
    var link = evt.target || evt.srcElement,
        links,
        i,
        target;
    if (link.nodeType === 1 && link.nodeName === 'A') {
        ...
    }
};

When one of the links is clicked, we want to hide the target div of all of the other links. If the link is for the one that was clicked, we show that one instead. And lastly, we return false to prevent the web browser from doing its default behaviour of loading the link.


links = this.getElementsByTagName('a');
for (i = 0; i < links.length; i += 1) {
    target = document.getElementById(links[i].href.split('#')[1]);

    if (link !== links[i]) {
        target.className = 'hidden';
    } else {
        target.className = '';
    }
}
return false;

Here’s a simple test demo of the technique, which is flexible and can be expanded to meet many different types of needs.

This test code is inline for the sake of posting here, but the css and javascript should normally be placed in a separate external file.


<html>
<head>
<style type="text/css">
#tabs li {
    display: inline;
}
.hidden {
    display: none;
}
</style>
</head>
<body>
<ul id="tabs">
    <li><a href="#apple">Apple</a></li>
    <li><a href="#banana">Banana</a></li>
    <li><a href="#grapefruit">Grapefruit</a></li>
    <li><a href="#noisy">Noisy</a></li>
    <li><a href="#watermelon">Watermelon</a></li>
</ul>
<div id="apple">
    <p><a href="http://lifehacker.com/5804509/how-to-split-an-apple-without-a-knife">How to Split an Apple Without a Knife</a></p>
</div>
<div id="banana">
    <p><a href="http://lifehacker.com/5349295/make-quick-ice-cream-with-only-frozen-bananas">Make Quick &#8220;Ice Cream&#8221; with Only Frozen Bananas</a></p>
</div>
<div id="grapefruit">
    <p><a href="http://www.npr.org/2011/04/18/135468567/repelling-bugs-with-the-essence-of-grapefruit">Repelling Bugs With The Essence Of Grapefruit</a></p>
</div>
<div id="noisy">
    <p><a href="http://www.youtube.com/watch?v=eHnnGHgeyC0">Noisy fruit and veggies - Synesthesia</a></p>
</div>
<div id="watermelon">
    <p><a href="http://www.bbc.co.uk/news/world-asia-pacific-13421374">China farmers face 'exploding' watermelon problem</a></p>
</div>
<script>
var tabs = document.getElementById('tabs');
tabs.onclick = function (evt) {
    evt = evt || window.event;
    var link = evt.target || evt.srcElement,
        links,
        i,
        target;
    if (link.nodeType === 1 && link.nodeName === 'A') {
        links = this.getElementsByTagName('a');
        for (i = 0; i < links.length; i += 1) {
            target = document.getElementById(links[i].href.split('#')[1]);
            if (link !== links[i]) {
                target.className = 'hidden';
            } else {
                target.className = '';
            }
        }
        return false;
    }
};
</script>
</body>
</html>