hide/show array of div id's with 1 checkbox

**whitemonkey2** · 08-17-2009, 05:16 PM

This is probably a snap for some of you but my JS skills are still beginner.

Below is an example fairly common show hide div script.
Works great to hide/show a single item.
I can even use it to create multiple checkboxes to hide/show different items.

But the problem is I need to use a single checkbox to hide a specified set of multiple id's to hide a bunch of divs. Its not an option to put the div's I want to hide in a single wrapper becuase theyre in different places.

I have been told you can do this by putting all the id's into an array.
I know a little about arrays but I haven't been able to figure out how to link an array with a script like below.

it should work this way
onclick checkbox=show this array of id's if box checked
onclick checkbox=hide the same array of id's again if box unchecked
(most divs would be set to display none by default)

I have seen suggestions to give everything the same id (not a good idea)
or use get element by name or class but my requirements are to do it by id's.

If somone could modify this to show a full working example how a single checkbox can be used to hide/show array of id's that would be great.

Doesn't need to be crossbrowser just ie6+. Simple as possible is best.
Thanks in advance.

here is the example to work with single id's

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript"> 
//show hide div script
<!-- 
function showMe (it, box) { 
  var vis = (box.checked) ? "block" : "none"; 
  document.getElementById(it).style.display = vis; 
} 
function showMe2 (it) { 
  var vis = document.getElementById(it).style.display 
  if (vis == "block") { document.getElementById(it).style.display = "none"; } 
                 else { document.getElementById(it).style.display = "block"; } 
} 
//--> 
</script>
<style type="text/css">
<!--
.divstyle
{
	display: none;
	border: 1px solid #000;
	height: 100px;
	width: 200px;
}
-->
</style>
</head>

<body>
<p>
 <input type="checkbox" onclick="showMe('div1', this)" /> 
show div 1
 <input type="checkbox" onclick="showMe('div2', this)" />
show div 2
<input type="checkbox" onclick="showMe('div3', this)" />
show div 3
<input type="checkbox" onclick="showMe('div4', this)" />
show div 4</p>
<div class="divstyle" id="div1">Content div1</div>
<div class="divstyle" id="div2">Content div2</div>
<div class="divstyle" id="div3">Content div3</div>
<div class="divstyle" id="div4">Content div4</div>

</body>
</html>

Here is a fragment of another script I found that is supposed to do something close to what i want. I was trying to merge with the other one but couldn't quite figure it out.

Code:

<script type="text/javascript">
	function hide_elements(div1,div2,div3,div4){
		var elems=new Array();
		elems=elementids.split(',');
		var len = elems.length;
		for(i=0;i<len;i++){
			element = document.getElementById(elems[i]);
			element.style.display = 'none';
  		};
	};
	function show_elements(div1,div2,div3,div4){
		var elems=new Array();
		elems=elementids.split(',');
		var len = elems.length;
		for(i=0;i<len;i++){
			element = document.getElementById(elems[i]);
			element.style.display = 'block';
  		};
	};
</script>

**magicyte** · 08-17-2009, 06:53 PM

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
var divs = ["div1", "div2", "div3", "div4"];
function visiblox(arrDiv, hs) {
	var disp = (hs) ? "block" : "none";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}
</script>
</head>
<body>
<input type="checkbox" onclick="chk(divs, this.checked);"> Show/Hide all<br>
<br>
<div id="div1" class="visi">hi there 1</div><br>
<div id="div2" class="visi">hi there 2</div><br>
<div id="div3" class="visi">hi there 3</div><br>
<div id="div4" class="visi">hi there 4</div><br>
</body>
</html>

the 'divs' variable is an array. to add another divider to the array, place a comma and a space in front of what is already there. place the div id in quotes. simple as that. enjoy!

**whitemonkey2** · 08-17-2009, 07:52 PM

awesome
Exactly what I was looking for.
I knew that was much simpler than I was trying to make it.

Thanks a bunch.

Just in case anyone is searching for this in the future here's another little useful mod.
You can specify another alternate array just show certain divs. Just give it a different name and reference the name in different checkbox.

Only thing buggy about it is If you already have the show all checked you have to click it twice to get just the 2 to show.

There's probably a way to get around that clicking the show 1 & 3 would automatically uncheck show all but for my purposes I dont need to figure it out now.

thanks again

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
var divs = ["div1", "div2", "div3", "div4"];
var divs13 = ["div1", "div3"];
function visiblox(arrDiv, hs) {
	var disp = (hs) ? "block" : "none";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}
</script>
</head>
<body>
<input type="checkbox" onclick="chk(divs, this.checked);"> Show/Hide all<br>
<br>
<input type="checkbox" onclick="chk(divs13, this.checked);"> Show/Hide 1,3<br>
<br>
<div id="div1" class="visi">hi there 1</div><br>
<div id="div2" class="visi">hi there 2</div><br>
<div id="div3" class="visi">hi there 3</div><br>
<div id="div4" class="visi">hi there 4</div><br>
</body>
</html>

**whitemonkey2** · 08-18-2009, 05:01 AM

More mods for future reference:

When I looked at this more closely I found it was actually working backwards from the way I wanted it.

Clicking the checkbox hid things, unchecking the checkbox showed things.
Logically I wanted it to work the opposite way where checking the checkbox shows things.

I figured out in var disp reversing the order of "block" : "none"; to "none" : "block"; seemed to fix it. (Not sure I understand why but it fixed it.)

Also sometimes you want some elements shown by default and some hidden.
I provided additional example divs 5 and 6 hidden by default.

Tip:
To avoid problems if you have something shown by default you should set The corresponding checkbox's property to checked or if something is hidden set it to unchecked (specifying nothing defaults a checkbox to unchecked)

Tested, also works in in FF 3.x

New code

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
var divs = ["div1", "div2", "div3", "div4"];
var divs13 = ["div1", "div3"];
var divs56 = ["div5", "div6"];
function visiblox(arrDiv, hs) {
	var disp = (hs) ? "none" : "block";
	for(var x = 0; x < arrDiv.length; x++) {
		document.getElementById(arrDiv[x]).style.display = disp;
	}
}

function chk(what, item) {
	if(item) {
		visiblox(what, false);
	} else {
		visiblox(what, true);
	}
}
</script>
<style type="text/css">
<!--

.show
{
	display: block;
}

.hide
{
	display: none;
}
-->
</style>
</head>
<body>
<input type="checkbox" onclick="chk(divs, this.checked);" checked> Show/Hide all<br>
<br>
<input type="checkbox" onclick="chk(divs13, this.checked);" checked> Show/Hide 1,3<br>
<br>
<input type="checkbox" onclick="chk(divs56, this.checked);"> Show/Hide 5,6<br>
<br>
<div id="div1" class="show">hi there 1</div><br>
<div id="div2" class="show">hi there 2</div><br>
<div id="div3" class="show">hi there 3</div><br>
<div id="div4" class="show">hi there 4</div><br>
<div id="div5" class="hide">hi there 5</div><br>
<div id="div6" class="hide">hi there 6</div><br>
</body>
</html>

**rubinraj** · 05-26-2010, 04:22 AM

HELP!!!
when i post the script to next page it dosent work please help me out URGENT!!!!

**loknath** · 06-21-2010, 11:38 AM

Originally Posted by whitemonkey2

This is probably a snap for some of you but my JS skills are still beginner.

Below is an example fairly common show hide div script.
Works great to hide/show a single item.
I can even use it to create multiple checkboxes to hide/show different items.

But the problem is I need to use a single checkbox to hide a specified set of multiple id's to hide a bunch of divs. Its not an option to put the div's I want to hide in a single wrapper becuase theyre in different places.

I have been told you can do this by putting all the id's into an array.
I know a little about arrays but I haven't been able to figure out how to link an array with a script like below.

it should work this way
onclick checkbox=show this array of id's if box checked
onclick checkbox=hide the same array of id's again if box unchecked
(most divs would be set to display none by default)

I have seen suggestions to give everything the same id (not a good idea)
or use get element by name or class but my requirements are to do it by id's.

If somone could modify this to show a full working example how a single checkbox can be used to hide/show array of id's that would be great.

Doesn't need to be crossbrowser just ie6+. Simple as possible is best.
Thanks in advance.

here is the example to work with single id's

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript"> 
//show hide div script
<!-- 
function showMe (it, box) { 
  var vis = (box.checked) ? "block" : "none"; 
  document.getElementById(it).style.display = vis; 
} 
function showMe2 (it) { 
  var vis = document.getElementById(it).style.display 
  if (vis == "block") { document.getElementById(it).style.display = "none"; } 
                 else { document.getElementById(it).style.display = "block"; } 
} 
//--> 
</script>
<style type="text/css">
<!--
.divstyle
{
	display: none;
	border: 1px solid #000;
	height: 100px;
	width: 200px;
}
-->
</style>
</head>

<body>
<p>
 <input type="checkbox" onclick="showMe('div1', this)" /> 
show div 1
 <input type="checkbox" onclick="showMe('div2', this)" />
show div 2
<input type="checkbox" onclick="showMe('div3', this)" />
show div 3
<input type="checkbox" onclick="showMe('div4', this)" />
show div 4</p>
<div class="divstyle" id="div1">Content div1</div>
<div class="divstyle" id="div2">Content div2</div>
<div class="divstyle" id="div3">Content div3</div>
<div class="divstyle" id="div4">Content div4</div>

</body>
</html>

Here is a fragment of another script I found that is supposed to do something close to what i want. I was trying to merge with the other one but couldn't quite figure it out.

Code:

<script type="text/javascript">
	function hide_elements(div1,div2,div3,div4){
		var elems=new Array();
		elems=elementids.split(',');
		var len = elems.length;
		for(i=0;i<len;i++){
			element = document.getElementById(elems[i]);
			element.style.display = 'none';
  		};
	};
	function show_elements(div1,div2,div3,div4){
		var elems=new Array();
		elems=elementids.split(',');
		var len = elems.length;
		for(i=0;i<len;i++){
			element = document.getElementById(elems[i]);
			element.style.display = 'block';
  		};
	};
</script>

I have a same content div for every checkboxes. I want that by clicking the checkboxes appear same content but it should be open newly because i have to put data into every content div. So it have to be save.
Please, write me if anyone knows how to do that.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
//show hide div script

</script>
<style type="text/css">

</style>
</head>

<body>
<p>
<input type="checkbox" onclick="showMe('div1', this)" />
show div 1
<input type="checkbox" onclick="showMe('div2', this)" />
show div 2
<input type="checkbox" onclick="showMe('div3', this)" />
show div 3
<input type="checkbox" onclick="showMe('div4', this)" />
show div 4</p>
<div class="divstyle" id="div1">Content div1</div>
<div class="divstyle" id="div2">Content div2</div>
<div class="divstyle" id="div3">Content div3</div>
<div class="divstyle" id="div4">Content div4</div>

</body>
</html>

Thread: hide/show array of div id's with 1 checkbox

Thread Tools

Search Thread

hide/show array of div id's with 1 checkbox

Bookmarks

Bookmarks

Posting Permissions