Javascript - Hide & Show

Rate this:

By pauen (Contact - View My Woyano)

Published Mon 19 Feb 2007, 6326 Views, 6 Comments

The following javascript code will hide or show a portion of a webpage. The first id is the div that will be hidden. The second id is the link that will change from Hide to Show.

function showhide(id, id2){
   if (document.getElementById){
       obj = document.getElementById(id);
       obj2 = document.getElementById(id2);
       if (obj.style.display == "none"){
           obj.style.display = "inline";
           obj2.innerHTML = "Hide";
       } else {
           obj.style.display = "none";
           obj2.innerHTML = "Show";
       }
   }
}

Here is the html. I float the link to the right side of the page. The link is outside the div so that is doesnot dissappear.

<hr>
<span style="display:block;float:right">
            ... Block Title ...
            <a id="flag1" href="#" onclick="showhide('div1','flag1');">Hide</a>
            </span>
<div id="div1" style="display:inline">
    ... stuff I want to hide
    </div>
<hr>

Any improvements or comments are certainly welcome.

Great content, let me share it! ť

6 Comments

Woyano team, It was difficult to edit this post. The html code was executed in the edit window.

[ reply ]

Much simpler version:

// pass the DIV id from onclick()

function fold(theid) {
var theid=document.getElementById(theid);
theid.style.display=(theid.style.display=="block")? "none" : "block";
}

[ reply ]

pauen ~ 37 months ago

0 votes

Thanks, I still would need to change "Hide" to "Show" and back again. I couldn't find a way to change both inside the ( ? : )

[ reply ]

Adding onto bobsawyerdotcom -- I find this very useful

NOTE: needs bobsawyerdotcom's "fold()" function to work

/**
* Show hide many elements by ids
* ie: show_hide( 'tag1_id, tag2_id, tag3_id' );
*/
function show_hide(ids)
{
var list_of_ids = new Array;

// check for , in id
if( ids.indexOf(',') )
{
list_of_ids = ids.split(',');
}

// do show/hide based on css display = none
// it will assume that the element is showing if no css "display" is found
if( list_of_ids.length > 0 )
{
for(i=0; i < list_of_ids.length; i++)
{
// show hide ele
fold(list_of_ids[i]);
}
}
else // one id
{
// show hide ele
fold(ids);
}
}

[ reply ]

ALSO change this line in from bobsawyerdotcom's function

theid.style.display=(theid.style.display=="block")? "none" : "block";

to:

theid.style.display=(theid.style.display=="none") ? "block" : "none";

This is that when you have no display set, the element will hide first time and not be set to "block" (so you don't have to click on it twice).

So heres the full function:

function fold(theid) {
var theid=document.getElementById(theid);
theid.style.display=(theid.style.display=="none") ? "block" : "none";
}

[ reply ]

You also might want to consider reverting to the default style for the object you are modifying, obviously block is fine for a div, but if you are working with differing types of container then its worthwhile.

[ reply ]

This is my two cents...

Hey you know AdGuy always gets the last word! ;)

Javascript - Hide & Show

People who liked this item

6 Comments

Please Login to Add Your Comment ..or..

Replying to comment by