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:
  3.     <style type="text/css">
  4.     #myDiv {
  5.         display: none;
  6.     }
  7.     </style>
  8. </head>
  10.     <div id="myDiv">Hello, World!</div>
  11. </body>
  12. </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:
  1. function toggleVisibility(elementID) {
  2.     var theDiv = document.getElementById(elementID);
  3.     if (theDiv.style.display=='none')
  4.         theDiv.style.display = '';
  5.     else
  6.         theDiv.style.display = 'none';
  7. }

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:
  1. <a href="#" onClick="toggleVisibility('myDiv')">Toggle My Div</a> <!-- link -->
  2. <button onClick="toggleVisibility('myDiv')">Toggle My Div</button> <!-- 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:
  3.     <script type="text/javascript">
  4.     function toggleVisibility(elementID) {
  5.         var theDiv = document.getElementById(elementID);
  6.         if (theDiv.style.display=='none')
  7.             theDiv.style.display = '';
  8.         else
  9.             theDiv.style.display = 'none';
  10.     }
  11.     </script>
  12. </head>
  14.     <div id="myDiv">Hello, World!</div>
  15.     <button onClick="toggleVisibility('myDiv')">Toggle My Div</button>
  16. </body>
  17. </html>

Posted on: May 14, 2008     Filed under: Javascript

Comments (5)

PHP Screen Scraping

May 26th, 2008 at 7:26 pm    

avatar

Any idea how the search engines feel about this? If you put content behind the toggle do they consider it cloaked?

Darren Pangan

May 29th, 2008 at 3:03 am    

avatar

I’m not really sure how Search Engines feel about that since I’m not an SEO expert. :)

Eligio

September 26th, 2008 at 6:53 pm    

avatar

definitely not consider as cloaking. cloaking is different from just hiding div using javascript.

Karol

April 8th, 2009 at 10:23 am    

avatar

Nice, but it doesn’t work when style is set with external css, only works for me when using style attribute.

Sigdrifa

February 19th, 2010 at 2:30 pm    

avatar

I used a script like this one, which used to work fine… Now suddenly it doesn’t anymore. It hides the trigger link instead of showing the div. Any ideas?

Leave a reply

Name *

Mail *

Website