Show/hide multiple divs with combo box selection

**madconfusion** · 08-10-2010, 10:06 PM

Hi Guys,

I have a form page that uses a code similar to:

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">This is DIV 1</div><br>
<div id="div2" class="show">This is DIV 2</div><br>
<div id="div3" class="show">This is DIV 3</div><br>
<div id="div4" class="show">This is DIV 4</div><br>
<div id="div5" class="hide">This is DIV 5</div><br>
<div id="div6" class="hide">This is DIV 6</div><br>
</body>
</html>

The problem is that, instead of the "check box" method to show/hide the various divs, I need it to be a combo box. I am sort of new to this, so I am sure it is easy for one of the more experienced members.

Any help is appreciated!

MC

**jscheuer1** · 08-11-2010, 02:42 AM

I think (correct me if I'm wrong) you are more interested in learning the principles behind this than having someone write or rewrite everything for you:

HTML Code:

<select name="whatever" onchange="chk(divs); chk([divs[this.value]], true);">
<option value="0">Show DIV 1</option>
<option value="1">Show DIV 2</option>
<option value="2">Show DIV 3</option>
<option value="3">Show DIV 4</option>
<option value="4">Show DIV 5</option>
<option value="5">Show DIV 6</option>
</select>

Using your existing javascript code, what this will do is that when an option is selected, it will hide all, and then show the one selected. This will happen so fast that it will simply look as though the selected div appears while all others disappear.

The basic concept though is that when you select an option from a select element, it will fire its onchange event (if any) and in that event this.value is the value of the option selected.

Feel free to ask questions.

**madconfusion** · 08-11-2010, 05:59 PM

Thanks for the assistance John. You are right in that I would like to learn this rather than just have it done for me.

I see how the individual DIVs are displayed and I was able to show/hide one div at a time. But I need to be able to show or hide multiple DIVs based on the selection from the combo box.

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
var divs = ["div0", "div1", "div2", "div3", "div4", "div5", "div6"];
//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>

<select name="list" onchange="chk(divs); chk([divs[this.value]], true);">
	<option value="0">Select One</option>
  <option value="1">Show DIV 1</option>
  <option value="2">Show DIV 2</option>
  <option value="3">Show DIV 3</option>
  <option value="4">Show DIV 4</option>
  <option value="5">Show DIV 5</option>
  <option value="6">Show DIV 6</option>
</select>
	
<div id="div0" class="hide"></div>	
<div id="div1" class="show">This is div 1</div><br>
<div id="div2" class="show">This is div 2</div><br>
<div id="div3" class="show">This is div 3</div><br>
<div id="div4" class="show">This is div 4</div><br>
<div id="div5" class="show">This is div 5</div><br>
<div id="div6" class="show">This is div 6</div><br>
</body>
</html>

This works to show or hide a single DIV, but I need to be able to make a selection from the combo box and show 2 or 3 DIVs at a time. I.E. if I select the first item in the combo box, then DIVs 1, 2 and 5 are shown. etc.

Thanks for the help.

**jscheuer1** · 08-11-2010, 06:28 PM

Add this function to your script:

Code:

function prechk(v){
	v = v.split(',');
	for(var i = 0; i < v.length; ++i){
		chk([divs[v[i]]], true);
	}
}

Use this select, for example:

HTML Code:

<select name="whatever" onchange="chk(divs); prechk(this.value);">
<option value="0,2">Show DIV 1 and 3</option>
<option value="1,3,5">Show DIV 2, 4 and 6</option>
<option value="2">Show DIV 3</option>
<option value="3">Show DIV 4</option>
<option value="4">Show DIV 5</option>
<option value="5">Show DIV 6</option>
</select>

**madconfusion** · 08-11-2010, 07:11 PM

That's it!!! I have been toiling with this since last night!!! Thanks a lot John.

One last thing, I need to have all of DIVs that are declared in "var divs" to be hidden until they are displayed, i.e. start hidden. But everything I try seems to hide all DIVs on the entire page all the time.

I appreciate your patience.

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
	
//***Need the following DIVs hidden until used****
var divs = ["div0", "div1", "div2", "div3", "div4", "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 prechk(v){
	v = v.split(',');
	for(var i = 0; i < v.length; ++i){
		chk([divs[v[i]]], true);
	}
}

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>

<select name="list" onchange="chk(divs); prechk(this.value);">
	<option value="0">Select One</option>
  <option value="1,5,6">Show DIVs 1, 5 and 6</option>
  <option value="2">Show only DIV 2</option>
  <option value="3">Show only DIV 3</option>
  <option value="4">Show only DIV 4</option>
  <option value="5">Show only DIV 5</option>
  <option value="6">Show only DIV 6</option>
</select>
	
<div id="div0" class="hide"></div>	
<div id="div1" class="show">This is div 1</div><br>
<div id="div2" class="show">This is div 2</div><br>
<div id="div3" class="show">This is div 3</div><br>
<div id="div4" class="show">This is div 4</div><br>
<div id="div5" class="show">This is div 5</div><br>
<div id="div6" class="show">This is div 6</div><br>
</body>
</html>

**jscheuer1** · 08-11-2010, 11:52 PM

You have two basic choices:

HTML Code:

<div id="div0" class="hide"></div>	
<div id="div1" class="hide">This is div 1</div><br>
<div id="div2" class="hide">This is div 2</div><br>
<div id="div3" class="hide">This is div 3</div><br>
<div id="div4" class="hide">This is div 4</div><br>
<div id="div5" class="hide">This is div 5</div><br>
<div id="div6" class="hide">This is div 6</div><br>

HTML Code:

<div id="div0" class="hide"></div>	
<div id="div1" class="show">This is div 1</div><br>
<div id="div2" class="show">This is div 2</div><br>
<div id="div3" class="show">This is div 3</div><br>
<div id="div4" class="show">This is div 4</div><br>
<div id="div5" class="show">This is div 5</div><br>
<div id="div6" class="show">This is div 6</div><br>
<script type="text/javascript">
chk(divs);
</script>

The first will hide all even if javascript is disabled. This may be a bad idea. The second will allow non-javascript users to at least see the content, though they obviously cannot switch among them using the select.

There's an interesting variation on option 2. Instead of hiding everything after it's parsed (which can cause a brief flicker as the page loads), you can use the first markup:

HTML Code:

<div id="div0" class="hide"></div>	
<div id="div1" class="hide">This is div 1</div><br>
<div id="div2" class="hide">This is div 2</div><br>
<div id="div3" class="hide">This is div 3</div><br>
<div id="div4" class="hide">This is div 4</div><br>
<div id="div5" class="hide">This is div 5</div><br>
<div id="div6" class="hide">This is div 6</div><br>

But instead of having this in the head of the page:

Code:

<style type="text/css">
<!--
.show
{
	display: block;
}
.hide
{
	display: none;
}
-->
</style>

replace it with:

Code:

<script type="text/javascript">
document.write('<style type="text/css">.hide {display: none;}<\/style>');
</script>

That way, if the user has javascript enabled, the divs with the class hide will be unseen from the beginning. Whereas those without javascript will see them all, because although they will still all have the hide class, the hide class will have no definition for non-javascript users.

**madconfusion** · 08-12-2010, 02:38 AM

Brilliant. I like the latter solution the best; it is more elegant than my version. I appreciate your very excellent assistance John. I don't have ton of cash, but I will be glad to donate to one of your causes.

best,
Clint

**fio** · 12-19-2010, 06:17 PM

Hi,

I'd like to use above script to show and hide few selections of DIVS on click on links.

I have 6 links and I'd like to those links show defined selections of DIVs and hide any other:
link1 - div1, div2, div10, div11
link2 - div1, div6, div9
link3 - div1,div4,div5
link4 - div1,div5,div14
link5 - div1,div7,div8,
link6 - div1,div4,div5,div10,div11,div12,div13

My code in <HEAD> is like below:

Code:

	<script type="text/javascript">
	// <![CDATA[
	var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8", "div9", "10", "11", "12", "13", "14"];
	var divs121011 = ["div1", "div2", "div10", "div11"]; /*autor*/
	var divs169 = ["div1", "div6", "div9"]; /*praca*/
	var divs145 = ["div1", "div4", "div5"]; /*wyszukiwarka*/
	var divs1514 = ["div1", "div5", "div14"]; /*miniblog*/
	var divs178 = ["div1", "div7", "div8"]; /*projkty*/
	var div14510111213 = ["div1", "div4", "div5", "div7", "div8"]; /*wiecej*/
	function visiblox(arrDiv, hs) {
		var disp = (hs) ? "none" : "inline";
		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: inline; }
	.hide { display: none; }
	-->
	</style>

In <BODY> like below:

Code:

<div id="menu">
		<ul>
			<li><a href="#div1" class="autor-link" onClick="javascript:chk(divs121011, this.checked);">meet <b>author</b></a></li>
			<li><a href="#div6" onclick="javascript:chk(divs169, this.checked);">Status</a></li>
			<li><a href="#div4" onclick="javascript:chk(divs145, this.checked);">Search</a></li>
			<li><a href="#div14" onclick="javascript:chk(divs1514, this.checked);">Miniblog</a></li>
			<li><a href="#div7" onclick="javascript:chk(divs178, this.checked);">Projects</a></li>
			<li><a href="#div1" onclick="javascript:chk(divs14510111213, this.checked);">More</a></li>
		</ul>
</div>

	<div id="div1" class="hide">Some text and graphics.
		<div id="div2" class="hide">Some text and graphics.</div>
		<div id="div3" class="hide">Some text and graphics.</div>
	</div>
	<div id="div4" class="hide">Some text and graphics.</div>
	<div id="div5" class="hide">Some text and graphics.</div>
	<div id="div6" class="hide">Some text and graphics.</div>
	<div id="div7" class="hide">Some text and graphics.</div>
		<div id="div8" class="hide">Some text and graphics.</div>
		<div id="div9" class="hide">Some text and graphics.</div>
		<div id="div9" class="hide">Some text and graphics.</div>
	</div>
	<div id="div10" class="hide">Some text and graphics.
		<div id="div11" class="hide">Some text and graphics.</div>
	</div>
	<div id="div12" class="hide">Some text and graphics.
		<div id="div13" class="hide">Some text and graphics.</div>
	</div>
	<div id="div14" class="hide">Some text and graphics.</div>

What I like to do is to have all DIVs hidden until user click on link, then display set of DIVs and when user click on other link to hide other and show DIVs only from selected set.

Can anyone help me with this?

Thread: Show/hide multiple divs with combo box selection

Thread Tools

Search Thread

Show/hide multiple divs with combo box selection

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions