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.
1
2
3
|
<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):
1
2
3
|
<script type="text/javascript">
document.getElementById("the_id").style.display = "none";
</script>
|
And this to show it:
1
2
3
|
<script type="text/Javascript">
document.getElementById("the_id").style.display = "block";
</script>
|
I haven’t tried, but it’s also probably possible to have show/hide links:
1
2
3
4
5
6
7
8
9
|
<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>
|
Of course, if you want to hide text in-place (without rearranging the flow of the remainder of the text), you’ll need:
1
2
3
4
5
6
7
8
9
|
<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>
|