Show Hide Toggle Div Element with Javascript

Showing and hiding, or ‘toggling’ elements is one of the most common tasks in javascript. Here’s a great resource that shows 7 different ways to do this:

7 ways to toggle a div

My personal favorite is the ternary operator:

[code lang="javascript"]function toggle(obj) {
var el = document.getElementById(obj);
el.style.display = (el.style.display != 'none' ? 'none' : '' );
}[/code]

You can adjust your examples to use display:none/display:block or visibility:hidden/visibility:visible, which have slightly different ways of rendering.

This entry was posted in Javascript, Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>