Paint the Tiger, Carve the Swan

There’s a little one-liner I’ve just learned for showing or hiding the contents of a particular <div> tag. (May also work for other types of tag).

The stuff you want to show or hide needs to have an id attribute. I use it to hide some stuff if there are no Comments or Trackbacks, since I’ve seperated them, and this was the best way to hide the title.

<div id="the_id">
    Text/Data To Hide Goes Gere
</div>

Then, you can use this code to hide it (in an {if} block, for instance):

<script type="text/javascript">document.getElementById("the_id").style.display = "none";</style>

And this to show it:

<script type="text/Javascript">document.getElementById("the_id").style.display = "block";</style>

I haven’t tried, but it’s also probably possible to have show/hide links:

<div id="the_id">
    Text/Data to Hide Goes Here.
</div>

<a onclick="javascript:document.getElementById('the_id').style.display = 'none'">Hide Text</a>
<a onclick="javascript:document.getElementById('the_id').style.display = 'block'">Show Text</a>

Text/Data to Hide Goes Here.

Hide Text
Show Text

Of course, if you want to hide text in-place (without rearranging the flow of the remainder of the text), you’ll need:

<div id="the_id">
    Text/Data to Hide Goes Here.
</div>

<a onclick="javascript:document.getElementById('the_id').style.visibility = 'hidden'">Hide Text</a>
<a onclick="javascript:document.getElementById('the_id').style.visibility = 'visible'">Show Text</a>