hide/show multiple divs

eMisc
eMisc used Ask the Experts™
on
I have this code for display or hide a div

function hide(){
 document.getElementById('divname').style.visibility = "hidden";
}
function show(){
 document.getElementById('divname').style.visibility = "visible";
}

Open in new window


I need to make it work with multiple divs at the same time, I tested it giving the same name to all divs but it only works with the 1st one, I can also give names to divs like div1,2,3...

I need it working on iphone safari

thank you!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Michel PlungjanIT Expert
Top Expert 2009

Commented:
you do not want to give names to div. Instead give unique IDs or the same className

<div class="hideable">Div 1</div>
<div class="hideable">Div 2</div>
<div class="hideable">Div 3</div>

then

function showHide(class,on) {
  var divs = document.getElementsByTagName('div');
  for (var i=0, n=divs.length;i<n;i++) {
    if (divs[i].clasName==class) divs[i].style.display=(on)?'':'none';
  }
}

and use

<input type="checkbox" onClick="showHide('hideable',this.checked)">Toggle

for example

Author

Commented:
hello, it doesn't work on iphone safari

thank you
Michel PlungjanIT Expert
Top Expert 2009

Commented:
does your code with my suggestion work on a normal browser? And whal does "not work" mean? Errors or nothing happens?
Announcing the Winners!

The results are in for the 15th Annual Expert Awards! Congratulations to the winners, and thank you to everyone who participated in the nominations. We are so grateful for the valuable contributions experts make on a daily basis. Click to read more about this year’s recipients!

Author

Commented:
hello, nothing happens, tested on chrome and iphone safari

thank you
Michel PlungjanIT Expert
Top Expert 2009

Commented:
please change clasName to className
Top Expert 2009
Commented:
could have a function like this for better usage.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
        <head>
        <script type='text/javascript'>
          document.getElementsByClassName = function( cl ) 
          {
                var retnode = [];
                var myclass = new RegExp( '\\b' + cl + '\\b' );
                var elem = this.getElementsByTagName( '*' );
                for ( var i = 0; i < elem.length; i++ ) {
                  var classes = elem[i].className;
                  if ( myclass.test( classes ) )
                        retnode.push( elem[ i ] );
                }
                return retnode;
          };
		  
		  function showHide(clazz,on) 
		  {
			 var divs = document.getElementsByClassName(clazz);
			 for (var i=0, n=divs.length;i<n;i++) 
			 {
			   divs[i].style.display=(on)?'':'none';
			 }
			}
        </script>
		</head>
        <body>
            <div class="hideable">Div 1</div>
			<div class="hideable">Div 2</div>
			<div class="hideable">Div 3</div>
			<input type="checkbox" checked onClick="showHide('hideable',this.checked)">Toggle
        </body>
</html>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Why, oh why would you scan the COMPLETE dom for this?
Then please use jQuery instead:
$(".hideable").toggle()
Top Expert 2009

Commented:
Yeah you point is true as to scan the DOM, we can as well reduce it for a particular type of element.. as i mentioned, for better usage meaning similar functionality .. meaning something like $(".hideable")


Author

Commented:
that worked fine with iphone!

mplungjan: your function works on chrome but not on iphone and desktop versions of safari, sorry
Michel PlungjanIT Expert
Top Expert 2009

Commented:
yes, like I posted: Only looks for divs  with class className ;)

function showHide(class,on) {
  var divs = document.getElementsByTagName('div');
  for (var i=0, n=divs.length;i<n;i++) {
    if (divs[i].className==class) divs[i].style.display=(on)?'':'none';
  }
}

Top Expert 2009

Commented:
eMisc,

I would like you to share or probably award mplungjan all the points.

mplungjan,

only reason I felt to use the function of mine was for better usage irrespective of the elements as in my previous post.

If any other class will be used along with hideable then the function would fail hence a regex to identify the presence of the class in my function.
Michel PlungjanIT Expert
Top Expert 2009

Commented:
the reason it did not work was I forgot that class is a reserved word in Safari and Kadaba spelled it clazz

It DOES work now on all browsers I have on Mac, Chrome, Fx and Safari 5

<html>
<head>
<script type="text/javascript">
function showHide(clazz,on) {
 var divs = document.getElementsByTagName('div');
 for (var i=0, n=divs.length;i<n;i++) {
   if (divs[i].className==clazz) divs[i].style.display=(on)?'':'none';
 }
}
window.onload=function() {
  showHide('hideable',document.getElementById('toggle').checked);
}
</script>
</head>
<body>
<div class="hideable">Div 1</div>
<div class="hideable">Div 2</div>
<div class="hideable">Div 3</div>
<div>
<input type="checkbox" id="toggle" checked="checked" onClick="showHide('hideable',this.checked)" />Toggle
</div>
</body>
</html>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009

Commented:
Ah, to use more than one class you can use

divs[i].className.indexOf(clazz)!=-1

thanks Kadaba for your suggestion

Author

Commented:
I changed clas to class but the result was the same (?)
Michel PlungjanIT Expert
Top Expert 2009

Commented:
I know, the class I passed to the function should have been clazz or something else since class on its own is reserved

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial