This is a javascript function that you will see in several different forms, yet all accomplish the same task. It is true what they say about “skinning a cat”… I wonder though… just how many ways are there really to skin a cat. I mean isn’t there really just 1 way… unless you consider all of the different tools you could use. Okay… I regress. Back to javascript:
function toggleMe(who) {
var elm=document.getElementById(who);
elm.style.display=(elm.style.display==’block’)?’none’:'block’;
}
Your html portion of this would be:
<div id=”foo” style=”display:none;”>
You can, of course, use this with span, div, td… pretty much anything. You can also use visibility which will utilize the space of the element, even if it is hidden. By using the display attribute, the space is actually collapsed when hidden. Play around with it and you’ll see the difference. To use the visibility attribute, you’ll use the following javascript dom breakdown (no… not breakdance… that’s optional):
elm.style.visibility=’visible’
OR
elm.style.visibility=’none’
That’s it… pretty back stuff. All we are doing is looking for the existing display value of our elements style. If it is currently shown, then we hide it. And vice versa… if it is currently hidden, then we show it.
You’ll see this about 100 different ways, but I’ve been doing it this way to save space. For those of you who aren’t familiar with using inline if statements in javascript, it’s really easy… take a look:
// this means set elm.style.display=(if display=’block’)?then set display to ‘none’:else set display to ‘block’
elm.style.display=(elm.style.display==’block’)?’none’:'block’;// long version would be as follows
if (elm.style.display==’block’) {
elm.style.display=’none’;
}
else {
elm.style.display=’block’;
}
Well, that’s all for now. Hope this has helped you somehow… I know that I sure use it a lot. Let me know if you have any other techniques that you use together with this that you would like to share. And for now… goodbye!!
