Seven ways to toggle an element with JavaScript

Friday, February 10th, 2006

There are litterally an unlimitted number of ways to toggle an element’s display with JavaScript. Some, more useful
than others. Dating back to the late nineties, toggling is perhaps the oldest trick in the book within JavaScript
development. However, to this day, it still proves itself useful as hiding/showing elements can improve user
interaction (when done tastefully).

Anyway, here are seven ways toward achieving just that.

The bottom line

First off, this is perhaps the simplest and shortest way to toggle.

toggling the short way

// showing

document.getElementById('element').style.display = '';

// hiding

document.getElementById('element').style.display = 'none';

So let’s make this into a function that’ll get the job done real quick like:

show? or hide?

function toggle(obj) {

        var el = document.getElementById(obj);

        if ( el.style.display != 'none' ) {

               el.style.display = 'none';

        }

        else {

               el.style.display = '';

        }

}

Well that was easy. But we can also go ternary style.

toggling ternary style

function toggle(obj) {

        var el = document.getElementById(obj);

        el.style.display = (el.style.display != 'none' ? 'none' : '' );

}

Cool. Hey, ever heard of the dollar function (http://www.dustindiaz.com/top-ten-javascript) ? If that’s sittin’ around
somewhere, let’s use it!

toggling with the ternary dollar

// our dollar function

function $() {

        var elements = new Array();

        for (var i = 0; i < arguments.length; i++) {

               var element = arguments[i];

               if (typeof element == 'string')

                       element = document.getElementById(element);

               if (arguments.length == 1)

                       return element;

               elements.push(element);

        }

        return elements;

}

// and now our improved toggler!

function toggle(obj) {

        var el = $(obj);

        el.style.display = (el.style.display != 'none' ? 'none' : '' );

}

Cool. Now that we’ve got this thing nice and compact… can’t we do anything else to make it cool? Why, of
course. Let’s say, instead of limitting it to just one object, let’s say “unlimitted.”

toggling multiple objects

function toggle() {

        for ( var i=0; i < arguments.length; i++ ) {

               $(arguments[i]).style.display = 
              ($(arguments[i]).style.display !=
		 'none' ? 'none' : '' );

        }

}

Sweet. Now that looks nice and sexy (quite personally, I think it’s the sexi’est’). But let’s see if we can extract any
of these into “showing” versus “hiding” using an object literal.

separating showing and hiding

var toggle = {

        show : function(obj) {

               document.getElementById(obj).style.display = '';

        },

        hide : function(obj) {

               document.getElementById(obj).style.display = 'none';

        }

};

Alright alright alright, I can dig that. But what happened to using our dollar buddy? Surely we can get that back in
the mix.

separating showing and hiding

var toggle = {

        show : function(obj) {

               $(obj).style.display = '';

        },

        hide : function(obj) {

               $(obj).style.display = 'none';

        }

};

Ok, why not even give it the flexibility of passing in as many arguments as we want to either? Ok, no problem.

separating showing and hiding

var toggle = {

        show : function() {

               for ( i=0; i < arguments.length; i++ ) {

                       $(arguments[i]).style.display = '';

               }

        },

        hide : function() {

               for ( i=0; i < arguments.length; i++ ) {

                       $(arguments[i]).style.display = 'none';

               }

        }

};

Cool. That pretty much covers it. You can view the multiple toggler function in action at
http://www.dustindiaz.com/basement/toggle.html.

—
JavaScripts Guides: Beginner, Advanced
JavaScripts Tutorials: Beginner, Advanced



[Home] [Templates] [Blog] [Forum] [Directory] JavaScript Guides Advanced -
Seven Ways to Toggle an Element with JavaScript