Darren Pangan

Toggling HTML Element Visibility Using Javascript

One of the most frequently asked questions in webmasters forums Javascript sections is how one can show and hide a certain HTML element with a click of a link or button. Doing that is actually simple. You just have to alter the element's style declaration, particularly the "display" property.

First of all, let me show you the "display" property of a div's style declaration.

PLAIN TEXT

HTML:

<html>
<head>
<style type="text/css">
#myDiv {
display: none;
}
</style>
</head>
<body>
<div id="myDiv">Hello, World!</div>
</body>
</html>

The sample code above shows a very simple HTML document with an inline CSS. The CSS defines the style for the "myDiv" element with only one property - "display: none". This simply means that "myDiv" is not shown. The element exists but it is somehow hidden. If you change the value of the display property to "block", or "inline", or simply disregard the whole property, the div "myDiv" will be shown. You can try that out for yourself to see this property in action.

Now that you know that we can use the display property of an element's style declaration (although we did it statically since we simply edit the property's value by manually editing the CSS code), the next thing we need to do is alter this property dynamically using Javascript.

The idea is to create a Javascript function that will change the value of the display property to "none" if the element is shown, or change it to "block", or "inline", or simply blank (default value) if the element is hidden. So everytime this function is called, the element's visibility toggles. The Javascript code of this function is shown below.

PLAIN TEXT

JavaScript:

function toggleVisibility(elementID) {
var theDiv = document.getElementById(elementID);
if (theDiv.style.display=='none')
theDiv.style.display = '';
else
theDiv.style.display = 'none';
}

Now, the next question is where do we use this function? The next thing we need is an event that will trigger this function. Most likely, the event will be a click of a button, or a link. If that is the case then the Javascript event we are looking at is the "onClick" event. The sample code below shows a link and button both set up to call the function above everytime they are clicked.

PLAIN TEXT

HTML:

<a href="#" onClick="toggleVisibility('myDiv')">Toggle My Div</a>
<button onClick="toggleVisibility('myDiv')">Toggle My Div</button>

So to summarize the idea of this whole setup:

1. We have an HTML element, a div. We gave it a unique ID - myDiv. This unique ID is important because it will be used by the Javascript function to refer to that particular element.

2. We created a Javascript function that will take an HTML element, change the style declaration's display property depending on the current value. If the element's display property is "none", it will change the display property to blank (so it becomes visible), otherwise, it will change the property to none (so it becomes hidden).

3. We setup a link's or button's onClick event to call this function.

The sample below demonstrates this whole idea.

PLAIN TEXT

HTML: