Results 1 to 8 of 8

Thread: Show/hide multiple divs with combo box selection

  1. #1
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Show/hide multiple divs with combo box selection

    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
    Last edited by madconfusion; 08-12-2010 at 03:10 PM. Reason: resolved

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    madconfusion (08-12-2010)

  4. #3
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    madconfusion (08-12-2010)

  7. #5
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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>

  8. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    You have two basic choices:

    1. 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>
    2. 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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    madconfusion (08-12-2010)

  10. #7
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    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

  11. #8
    Join Date
    Dec 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by fio; 12-19-2010 at 05:20 PM. Reason: Correcting example code

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •