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.

    <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";
    </script>

And this to show it:

    <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:

    <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:

    <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>