Hey guys Okay I'm looking to hide a set of divs. Let's say I have an unknown amount of divs that all share the same id (so that they can be hid and shown at the same time). So I want a checkbox that will toggle them all on or off (checkbox will be checked initially). How do I build this. So far I have this code here as an example but it's not working (and the checkbox isn't checked at the start. <head> <script type="javascript"> function toggle(ID) { var el = document.getElementById(ID); if ( el.style.display != 'none' ) { el.style.display = 'none'; } else { el.style.display = ''; } } </script> </head> <body> <form> <input type="checkbox" onClick="toggle(descr);"> See Descriptions </form> <div id="descr">Hello This is #1</div> <div id="descr">Hello This is #2</div> <div id="descr">Hello This is #3</div> </body> Code (markup):
Hello, I've updated your code to what I think you were after. It will show/hide a div block based on the ID passed to the Toggle function. <head> </head> <body> <script language="javascript"> function toggle(divId) { var divArray = document.getElementsByTagName("div"); for(i = 0; i < divArray.length; i++){ if(divArray[i].id == divId){ if(divArray[i].style.display != 'none'){ divArray[i].style.display = 'none'; }else{ divArray[i].style.display = ''; } } } } </script> <form> <input type="checkbox" checked onClick="toggle('descr');"> See Descriptions </form> <div id="descr">Hello This is #1</div> <div id="descr">Hello This is #2</div> <div id="descr">Hello This is #3</div> <div id="non-descript">Hello This is not one of them</div> </body> Code (markup):
better don't use the same ids. use an array of IDs you want to show/hide and with prototypejs framework it is 3 lines of code.
An id has to be unique for the page; the same id can't be shared. Instead, use a class to target the elements selectively here. And when using getElementsByClassName, it's still worth checking for non-supporting browsers. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title></title> <style type="text/css"> ul { list-style: none; } fieldset { width: 15em; } input { float: right; } </style> </head> <body> <form> <fieldset> <label for="cbox" id="state">All Descriptions Shown</label> <input id="cbox" type="checkbox" checked="checked" /> </fieldset> </form> <ul> <li class="descr">Hello This is #1 (can be toggled)</li> <li class="descr">Hello This is #2 (can be toggled)</li> <li class="descr">Hello This is #3 (can be toggled)</li> <li>Hello This is #4 (cannot be toggled)</li> </ul> <script type="text/javascript"> if (document.getElementsByClassName == undefined) { // only needed for old browsers like IE8 and earlier // http://www.snipplr.com/view/45280/getelementsbyclassname/ document.getElementsByClassName = function(className, node) { if(!node) node = document.getElementsByTagName("body")[0]; var a = []; var re = new RegExp('\\b' + className + '\\b'); var els = node.getElementsByTagName("*"); for(var i=0,j=els.length; i<j; i++) if(re.test(els[i].className))a.push(els[i]); return a; } } function toggle(theClass, display) { var elems = document.getElementsByClassName(theClass); var state = document.getElementById("state"); for (var i=0; i<elems.length; i++) elems[i].style.display = display; if (display == "block") state.innerHTML = "All Descriptions Shown"; else state.innerHTML = "Classed Descriptions Hidden"; } document.getElementById("cbox").onclick = function() { if (this.checked) toggle("descr", "block"); else toggle("descr", "none"); } </script> </body> </html> Code (markup):