Show/Hide JavaScript Code

2005-10-05 @ 15:26:26

blogging
languages

here.

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     <div id="the_id">
2         Text/Data To Hide Goes Gere
3     </div>

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

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

And this to show it:

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

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

1     <div id="the_id">
2         Text/Data to Hide Goes Here.
3     </div>
4     <a onclick="javascript:document.getElementById('the_id').style.display = 'none'">
5         Hide Text
6     </a>
7     <a onclick="javascript:document.getElementById('the_id').style.display = 'block'">
8         Show Text
9     </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     <div id="the_id">
2         Text/Data to Hide Goes Here.
3     </div>
4     <a onclick="javascript:document.getElementById('the_id').style.visibility = 'hidden'">
5         Hide Text
6     </a>
7     <a onclick="javascript:document.getElementById('the_id').style.visibility = 'visible'">
8         Show Text
9     </a>