logo
Back to example page

Using Javascript to hide/show single/multiple div(s)

This is in responce to my blog post here

There are several areas of which I want to show how it works. You can use the quick anchors below for easy access
1. Show/Hide 1 div
2. Show/Hide 2 divs with the same name
3. Show/Hide differently named divs with 1 button


Part 1. Show/Hide 1 div.
In this example we have 1 div that we want a show/hide button for.
When you click the button I will hide, click it again and I reappear.

I Prefer to have my javascript in a seperate file. I call it with "<script type='text/javascript' src='./functions.js'></script>" in the html HEAD
First is the code to put into the functions.js file:
The Code:
function toggle_visibility(example1)
{
  var e = document.getElementById(example1);
  if(e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}
Note that inside the () it says "example1".
Now in your html you need
<div id="example1" style="display:block;">
Anything you put into this div tag will first be seen. If you want it hidden first change "block" to "none" and reverse the "e.style.display" in the javascript.
After the </div> we need the button. Below is my example code.
<input type="button" id="ex1" value="Hide/Show" onClick="toggle_visibility('example1');">


Part 2. Show/Hide 2 divs with the same name.
From here on I will just be copy and pasting code and there will still be example buttons to show you how it works with little to no explanation. If you have questions you can e-mail me, post in our forum or comment on the blog

This gets a little tricky, the easiest thing to say is you can't use "id" in the div. You can only have one per page, but you can have all you want if you change it to "class".
First class below:
When you click the button I hide and show.
Second class below:
When you click the button I also hide and show.

We need specialy code to get the class with javascript.
var hidden = false;
function getElementsByClass( searchClass, domNode, tagName) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1)
    el[j++] = tags[i];
  }
  return el;
}
That code get javasvript to look for a "class" instead of an "id".
Next we need:
function toggle_example2()
{
  hidden = !hidden;
  var newDisplay;
  if(hidden)
  {
    newDisplay = 'none';
  }
  else
  {
    newDisplay = 'block';
  }
  var hellos = getElementsByClass("example2", null, "div");
  for(var i = 0; i < hellos.length; i++)
  {
    hellos[i].style.display = newDisplay;
  }
}
Note where it says "example2". That's inportant!
HTML Code:
<div class='example2' style='display:block;'>
Text here.
</div>
Botton code:
<input type="button" id="ex2" value="Hide/Show Example 2" onClick="toggle_example2();">


Part 3. Show/Hide differently named divs with 1 button
Here I will use the "class" div like in example 2. Below there are 2 divs, both will show and hide with 1 button click!
First div below:
When you click the button I hide and show.
Second class below:
When you click the button I also hide and show.

Cool huh?
The Javascript code:
var hidden = false;
function getElementsByClass( searchClass, domNode, tagName) {
  if (domNode == null) domNode = document;
  if (tagName == null) tagName = '*';
  var el = new Array();
  var tags = domNode.getElementsByTagName(tagName);
  var tcl = " "+searchClass+" ";
  for(i=0,j=0; i<tags.length; i++) {
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1)
    el[j++] = tags[i];
  }
  return el;
}

function toggle_example3()
{
  hidden = !hidden;
  var newDisplay;
  if(hidden)
  {
    newDisplay = 'none';
  }
  else
  {
    newDisplay = 'block';
  }
  var hellos = getElementsByClass("example3a", null, "div");
  for(var i = 0; i < hellos.length; i++)
  {
    hellos[i].style.display = newDisplay;
  }
  var hellor = getElementsByClass("example3b", null, "div");
  for(var i = 0; i < hellor.length; i++)
  {
    hellor[i].style.display = newDisplay;
  }
}
All I really did was change the variable "hellos" to "hellor". You can change it to what ever you want.
HTML Code:
First div below:
<div class='example3a' style='display:block;'>
First div's stuff.
</div>
Second class below:
<div class='example3b' style='display:block;'>
Second div's stuff.
</div>
<input type="button" id="ex3" value="Hide/Show Example 3" onClick="toggle_example3();">




Like I've said multiple times already, if you have questions or comments you can post them in our forum or comment on the blog