Show One Div And Hide The Previous Showing Div

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 ); for (var k in unhidden) { unhidden[k].className='hidden'; } var item = document.getElementById(divID); if (item) { item.className='unhidden'; } }

Solution 2:

You can do something like this :

functionunhide(divID) {
    var divs = document.getElementsByTagName('div');
    foreach(var div in divs){
        div.className = 'hidden';
        if(div.id == divID)
            div.className = 'unhidden';
    } 
}

Be careful with document.getElementsByTagName('div');, it will return you all divs on your document. You could adapt it using a wrapper.

For example :

HTML

<div id="wrapper">
    <div id="text1"class="unhidden"> 
        This will show up when the Text1 link is pressed.
    </div>
    <div id="text2"class="hidden"> 
        This will show up when the Text2 link is pressed.
    </div>
    <div id="text3"class="hidden">
        This will show up when the Text3 link is pressed.
    </div>
</div>

JS :

var divs = document.getElementById('wrapper').getElementsByTagName('div');

Solution 3:

Try this http://jsfiddle.net/L79H7/1/:

functionunhide(divID) {

        var divIds = [ "text1", "text2", "text3" ];
        for ( var i = 0, len = divIds.length; i < len; i++) {
            var item = document.getElementById(divIds[i]);
            if (item) {

                item.className = divID == divIds[i] ? 'unhidden' : 'hidden';

            }
        }

    }

Solution 4:

You could also store in an array the names of the divs you want to hide and iterate over it when unhiding one:

var divs= newArray("text1", "text2", "text3");

functionunhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className='unhidden';
    }
    for (var i in divs){
        if (divs[i] != divID){
            item = document.getElementById(divs[i]);
            if (item) {
                item.className='hidden';
            }
         }
    }
}

JSFiddle

Solution 5:

You don't need exactly links for this, but if you insist change it to:

<ahref="#"onclick='unhide("text3");'>Text 3</a>

Otherwise you can change it to:

<p onclick="unhide('text1')">Text1</p> 
<p onclick="unhide('text2')">Text2</p>
<p onclick="unhide('text3')">Text3</p>
<div id="text1"class="unhidden"> 
This will show up when the Text1 link is pressed.
</div>
<div id="text2"class="hidden"> 
This will show up when the Text2 link is pressed.
</div>
<div id="text3"class="hidden">
This will show up when the Text3 link is pressed.
</div>

And your function should look like this to add or remove classes:

function unhide(id){
    yourElement = document.getElementById(id);
    if(yourElement.className == "unhidden"){
        yourElement.className = "hidden";
        }else{
        yourElement.className = "unhidden";
    }        
}