The Simplest JavaScript Show/Hide In The World

Need to hide, then show some HTML content? Maybe you need to hide some text until the user explicity asks for it? In any case, here’s a really simple way to do it:

<script type="text/javascript">
function toggle(element) {
	document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}
</script>

Click to toggle insightful quote…

In Code We Trust

Add this to your HTML (or preferrably your globally included JavaScript file):

<script type="text/javascript">
function toggle(element) {
	document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
}
</script>

Add this to where you want to show or hide stuff:

<a href="javascript:toggle('secret')">Click to toggle…</a>

<div id="secret" style="display: none;">

Top Secret!

</div>

[Update]: Thanks to Jeff Minard for drastically optimising the code.

0 Responses to “The Simplest JavaScript Show/Hide In The World”

  1. Jeff Minard says:

    Ternary operators ftw:


    function toggle(element) {
    document.getElementById(element).style.display = (document.getElementById(element).style.display == "none") ? "" : "none";
    }

    ;)

    November 19, 2007 at 12:13
  2. Joen says:

    Ooh, nice! I’ve been meaning to learn that syntax for ages. Thanks.

    November 19, 2007 at 12:14
  3. lm says:

    what if JS is off? Do you have some workaround to get hidden content accessiblet?

    And thanks for the snippet anyway, we love it.

    November 19, 2007 at 20:55
  4. Joen says:

    what if JS is off? Do you have some workaround to get hidden content accessiblet?

    And thanks for the snippet anyway, we love it.

    Actually I do.

    If you want it to degrade gracefully, leave out the ‘ style=”display: none;”‘ from the HTML, and instead add the following:

    <script type=”text/javascript”>hideOnLoad(“secret”)</script>

    But you have to add the following function to the JS snippet:

    function hideOnLoad(element) {
document.getElementById(element).style.display = "none";
}

    That way, the box will only become hidden in the first place, if you do have JS enabled. If you do have JS, and it is hidden, the toggle will also work. I actually do that on the frontpage of noscope .

    November 19, 2007 at 22:56
  5. lm says:

    Oh this is smashing, thanks so much. Let us to kill as a JS users and those who has it off at once.

    November 20, 2007 at 00:11
  6. bramick says:

    I’ve used a similar type of js toggle of css for a web based application I was having to do design and CSS/html coding. It works very well.

    November 20, 2007 at 18:25
  7. Grim says:

    Doesn’t work on my iPhone.

    :-(

    November 20, 2007 at 22:09
  8. Leonie says:

    Excellent. Thank you for this! It will come in useful.

    November 21, 2007 at 16:59
  9. mo says:

    This is really wonderful, I use this in my menu arrows and I had first seen it in fauna’s comment html syntax guide.

    November 25, 2007 at 05:50
  10. Kaisar says:

    You can simplify the code yet a little more. Please check out the code I posted earlier this year for toggling (show/hide) all combo boxes of a page:

    http://kaisar-haque.blogspot.com/2007/05/javascript-yet-another-toggle-showhide_03.html

    Cheers!

    -Kaisar

    November 28, 2007 at 00:13
  11. Gear says:

    Ah brilliant, this is perfect, just what I needed for my site.

    Thanks!

    March 19, 2008 at 23:12
  12. Gynaika Santamaria says:

    Fort Lauderdale Florida, 33301. USA

    Merci mil fois merci!
    Gracias, funciona perfecto! :)

    October 8, 2009 at 22:16
  13. Marek says:

    Brilliant script – why can’t all scripts be this good and this simple?

    October 29, 2009 at 00:24