javascript - Show one div and hide the previous showing div

Question

I have some links that will show a div when clicking it. When clicking another link, it should show the link's associated div and hide the previously shown div.

HTML

<a href="javascript:unhide('text1');">Text 1</a> 
<a href="javascript:unhide('text2');">Text 2</a>
<a href="javascript:unhide('text3');">Text 3</a>
<div id="text1" class="unhidden"> 
    This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden"> 
    This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
    This will show up when the Text 3 link is pressed.
</div>

Javascript

function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
}

CSS

.hidden { display: none; }
.unhidden { display: block; }

How can I accomplish this?

Answer 1

Try with:

function unhide(divID) {
    var unhidden = document.getElementsByClassName('unhidden');
    for (var k in unhidden) {
        unhidden[k].className='hidden';
    }

    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
}