Hide/show divs simultaneously

JavaScript
1

Hello all!
I have 2 things that I want to show/hide using JS.


<html>
<head>
<title>Hidden Div</title>
<script language="JavaScript">
function showstuff(boxid){
   document.getElementById(boxid).style.visibility="visible";
}

function hidestuff(boxid){
   document.getElementById(boxid).style.visibility="hidden";
}</script>
</head>
<body>

	<a href="#" onclick="showstuff('one'); hidestuff('two');">Show ONE</a>
	<a href="#" onclick="showstuff('two'); hidestuff('one');">Show TWO</a>

<div id="one" style="display:none" >ONE.</div>
<div id="two" style="display:none">TWO.</div>
</body>
</html>

If I use it as it is I don’t see anything!
If I don’t use style=“display:none” inside the divs, I see them both initially and I can hide/show each one depending on which link I press. But the thing is that I need both divs to be hidden in the first place, and when I click on ONE, to show TWO, when I click on TWO to hide ONE and show TWO etc. Each time 1 div should be visible, depending on which link we press. The other must disappear.

2

You’ll need to stop the page from following the links, so put ‘return false’ at the end of each onclick attribute

Also you’ll need to use style.display=‘none’ and style.display=‘’ (tested in Chrome)

(Just to make the code a bit neater, it could be worth putting those onclick lines into separate functions)

3

Inline CSS and inline events :nono:

Remove the inline CSS and inline events. Set up the HTML code so that it works when scripting and/or CSS are not available. You can easily achieve that by using fragment identifiers as the links to the different sections.


<a href="#one">Show ONE</a>
<a href="#two">Show TWO</a>
<div id="one">ONE.</div>
<div id="two">TWO.</div>

Now modify that so that scripting can easily access and work with the links


<div id="sections">
    <a href="#one">Show ONE</a>
    <a href="#two">Show TWO</a>
</div>
<div id="one">ONE.</div>
<div id="two">TWO.</div>

Attach an onclick event on to each of the links


var sections = document.getElementById('sections'),
    links = sections.getElementsByTagName('a'),
    i;
for (i = 0; i < links.length; i += 1) {
    links[i].onclick = showSection;
}

The showSection function will handle the task of hiding the other sections, and showing the one that was clicked on.
The link that triggered the onclick event will be referenced by the this keyword


function showSection() {
    var sections = document.getElementById('sections'),
        links = sections.getElementsByTagName('a'),
        i;
    for (i = 0; i < links.length; i += 1) {
        document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
    }
    document.getElementById(this.href.split('#')[1]).className = '';
    return false;
}

As we are adding and clearing a class name of hidden, we’ll want that to be defined in our CSS file


.hidden {
    display: none;
}

And lastly, to hide all of the sections when you start, you can just run the showSection() function without link being referenced.


showSection();

That works, but there is some duplication of the links variable. Both the section variable and the links variable are separately created. Once when attaching the onclick events, and again each time the showSection function is invoked.

To resolve that, you can use a createShowSection function that accepts the links variable, and returns the showSection function.


function createShowSection(links) {
    return showSection;
}

Now you can use that function when assigning the onclick events, which allows the showSection function to know about the links array


var sections = document.getElementById('sections'),
    links = sections.getElementsByTagName('a'),
    showSection = createShowSection(links),
    i;
for (i = 0; i < links.length; i += 1) {
    links[i].onclick = showSection;
}

We can now remove sections and links from the showSection function, and things are more streamlined.


function showSection() {
    var i;
    ...
}

So finally, here’s the CSS code for the test page:

style.css


.hidden {
    display: none;
}

Here’s the HTML code for the test page:

index.html


<html>
<head>
<title>Hidden Div</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="sections">
    <a href="#one">Show ONE</a>
    <a href="#two">Show TWO</a>
</div>
<div id="one">ONE.</div>
<div id="two">TWO.</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

And here’s the script for the test page:

script.js



function showSection() {
    var i;
    for (i = 0; i < links.length; i += 1) {
        document.getElementById(links[i].href.split('#')[1]).className = 'hidden';
    }
    document.getElementById(this.href.split('#')[1]).className = '';
    return false;
}
function createShowSection(links) {
    return showSection;
}
var sections = document.getElementById('sections'),
    links = sections.getElementsByTagName('a'),
    showSection = createShowSection(links),
    i;
for (i = 0; i < links.length; i += 1) {
    links[i].onclick = showSection;
}
showSection();