How Websites Work: Using Javascript to show and hide elements on a page

Web Development Tools and Techniques

Modern web interfaces can do all kinds of crazy stuff.  From Drag and Drop to DHTML animations it’s getting pretty intense to see what people have accomplished in browsers. But we’re taking baby steps here, so let’s take a look at how to show and hide an element on a page using Javascript.

First off I’m going to ask you to make a change in your mental model of what we’re doing. Instead of thinking that we’re using Javascript to change the way an element appears take a step back and say “I want to change the way an element appears on the page, how do I do that?”.

If you answer was CSS then congrats!  CSS is always how you should style your html.  Javascript is used to add interactions.  To show and hide an element we will 1) make a css class that hides the element 2) use Javascript to add and remove that class from the element.

Part 1: The CSS

In more complicated web applications the need to hide an element will come up all the time, so let’s make a class that we can apply to any element that will make sure the user never sees it while that class is applied.

/** Hide Class **/
.hide {
        display: none;
        position: absolute;
        left: -9999px;
}

Now you may think that simply applying display:none; would have done the trick and in most cases you’d be right.  But adding the absolute positioning that moves the element offscreen ensures that we’ll never see that guy.

Part 2: The Javascript

Now that we can show and hide things with CSS we need to write some javascript that will apply or remove the “.hide” class when we ask it to. To do this we’ll be accessing the “className” attribute on the element that we want to show or hide, and setting it either to “.hide” or to blank.  For clarity sake we’ll do this in two functions that look like this:

function showElement(elId) {
	var el = document.getElementById(elId);
	el.className = '';
}

function hideElement(elId) {
	var el = document.getElementById(elId);
	el.className = 'hide';
}

Each of these functions takes a string as an argument. This string is the id of the element that you’re looking to show (or hide). Inside each function we grab the element that has that id using document.getElementById() and set the className accordingly.

Click here to see an example. (View source to see the html)

As you can see I also created a function that allows you to toggle an element. That is, if the element is currently shown hide it, and if it’s currently hidden show it. The code for that looks like so:

function toggleElement(elId) {
	var el = document.getElementById(elId); 

	if (el.className == 'hide') {
		showElement(elId);
	} else {
		hideElement(elId);
	}
}

Part 3: Going a little further

If you’re doing very much complicated javascript you’ll probably want to look in to using one of the many very good javascript libraries.  I personally recommend the Yahoo User Interface library and the jQuery library.  A good library will give you lots of tools for interacting with the DOM. We could make the above functions a lot more usefull if we had access to things like hasClass(), addClass() and removeClass().  If we had those things the code might look like:

function showElement(elId) {
	var el = $(elId);
	el.removeClass('hide');
}

function hideElement(elId) {
	var el = $d(elId);
	el.addClass('hide');
}

function toggleElement(elId) {
	var el = $(elId); 

	if (el.hasClass('hide') {
		showElement(elId);
	} else {
		hideElement(elId);
	}
}

Keep in mind that the above code will not work in your browser if you copy it in. You’ll need to get a library that has the necessary functions and alter the code above to call the functions in the correct way.

You’ll also note that i used $() instead of ‘document.getElementById()’.  It is common shorthand to alias document.getElementById() as $().

MT @ October 28, 2008