Need javascript to show hide Div

I have 5 divs that are initially set to style="display:none", that I want to show visible depending on selection of dropdownlist, and hide when an alternate selection is given.  I need a javascript function in page "HEAD" that controls it. I have no idea how to do the javascript. I found a javascript that works with an html written ddl, but mine is populated by database and is represented by its selected index.
Here is the Javascript, DDL and Divs:

When selected index = 1, then I need div "pos010" to be visible
When selected index = 5, then I need div "fl115" to be visible
When selected index = 8 , then I need div "sc104" to be visible
When selected index = 10, then I need div "DV" to be visible
When selected index = 19, then I need div "CH" to be visible
When there is any other selected index, then all divs should be invisible.

<SCRIPT LANGUAGE="javascript">
function showhide(id)
{
objContainer = document.getElementById('spContainer');
arrDivTags = objContainer.getElementsByTagName('DIV');
arrDivs = new Array(arrDivTags.length);
for (i = 0; i < arrDivTags.length; i++) {
  arrDivs[i] = arrDivTags[i].id;
}

var myindex = id.selectedIndex;
var SelName = id.options[myindex].value;
for(i=0;i<arrDivs.length;i++) {
  obj = document.getElementById(arrDivs[i]);
  if(arrDivs[i] == SelName) {
     obj.style.display = "block";
  } else {
     obj.style.display = "none";
  }
}
}

</SCRIPT>


<asp:DropDownList ID="POS" runat="server" onchange="showhide(this);"></asp:DropDownList>

<div id="spContainer" style="display:block" runat="server">  
                                         
<div id="pos010" runat="server" style="display:none">
            content here
</div>
<div id="sc104" runat="server" style="display:none">
            content here
</div>
<div id="fl115" runat="server" style="display:none">
            content here
</div>
<div id="DV" runat="server" style="display:none">
          content here
</div>
<div id="CH" runat="server" style="display:none">
        content here
</div>
</div>
LVL 1
mlg101Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mahdii7Commented:
There are a million ways to accomplish this. For simplicity, I recommend a lightweight JavaScript library to help with your css attributes. jQuery is very popular: http://jquery.com/

Once linked and uploaded, you can select any element by its ID attribute. For example, to select the div "pos010" you would type:

 $("#pos010")

the # in front of the ID lets jQuery know it needs to select by the ID attribute. You can also select by class, structure, and other useful selectors. For this function I'm using ID. Now to change a CSS property in the DIV, you simply use the css function:

$("#pos010").css("display":"block");

Putting this with a switch() function, we come up with the following...


function showhide(value){
	switch (value){
		case "1":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		case "5":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		case "1":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		case "8":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		case "10":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		case "19":
			$("div_to_show").css("display":"block");
			$("div_to_hide").css("display":"block"); //repeat as needed
			break;
		default:
			$("div_to_hide").css("display":"block"); //repeat as needed
	}
}
 
 
// Doesn't jQuery make JavaScript easy? Cheers..

Open in new window

0
Mahdii7Commented:
Copy and paste.. And no edit button.. Great..

all of the: $("div_to_hide").css("display":"block");
should obviously be: $("div_to_hide").css("display":"none");

If you want to hide the div

Cheers
0
Mahdii7Commented:
And one more for good measure.. I'm sorry I'm multitasking here..

All of the:  $("div_to_hide") or  $("div_to_show")
Should be:  $("#div_to_hide") or  $("#div_to_show")

As I mentioned earlier, to select by ID.. So sorry for the spam
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

mlg101Author Commented:
I'm going to try it now, but let me ask this:  selecting by ID ("#div_to_hide"), how does that correlate to the ID of the dropdownlist? I am setting the div CSS properties, which is fine, but the ddl choices do not correlate with the div id names. Maybe if I try it, it will make sense.
0
mlg101Author Commented:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
function showhide(value){
      switch (value){
            case "1":
                  $("pos010").css("display":"block");
                  
                  break;
            case "5":
                  $("fl115").css("display":"block");
                                    break;
            case "8":
                  $("sc104").css("display":"block");
                                    break;            
            case "10":
                  $("DV").css("display":"block");
                                    break;
            case "19":
                  $("CH").css("display":"block");
                  
                  break;
            default:
                  $("pos010").css("display":"none"); //repeat as needed
                  $("fl115").css("display":"none"); //repeat as needed
                  $("sc104").css("display":"none"); //repeat as needed
                  $("DV").css("display":"none"); //repeat as needed
                  $("CH").css("display":"none"); //repeat as needed
                  
      }
}
</script>

I downloaded the js file and put it on the site. This is how i put in the javascript in my page head. it didnt work. the first time I got an error, and the 2nd time, it didnt load the page, saying "transport level error"

0
Mahdii7Commented:
Thats in the switch() call

switch takes a variable and essentially throws it against a bunch of if() else() statements. I didn't realize you did not write the above JavaScript until now, so my apologies for not being more clear. Heres a more detailed example...




/*
To use this function, we need a value for the "value" variable. This comes from the following attribute on your dropdown list:
 
onchange="showhide(this);"
 
Where 'this' is a built in (standard) JavaScript function that will grab the value of the dropdown. So if the value is 1, you need to hide the div with the ID of "pos010". So, under the switch() call, we ask the JavaScript to perform a task if the value is 1, then "break" to end the switch().
*/
 
function showhide(value){
switch (value){
                case "1":
 // Show the div if the value is 1 on the dropdown
                        break;
                case "5":
 // Show the div if the value is 5 on the dropdown
                        break;
                case "8":
 // Show the div if the value is 8 on the dropdown
                        break;
                case "10":
 // Show the div if the value is 10 on the dropdown
                        break;
                case "19":
 // Show the div if the value is 19 on the dropdown
                        break;
                default:
 // None of the specified values match, so we hide everything
        }
}

Open in new window

0
Mahdii7Commented:

<script type="text/javascript" >
$(document).ready(function(){
function showhide(value){
      switch (value){
            case "1":
                  $("#pos010").css({"display":"block"});
                  
                  break;
            case "5":
                  $("#fl115").css({"display":"block"});
                                    break;
            case "8":
                  $("#sc104").css({"display":"block"});
                                    break;            
            case "10":
                  $("#DV").css({"display":"block"});
                                    break;
            case "19":
                  $("#CH").css({"display":"block"});
                  
                  break;
            default:
                  $("#pos010").css({"display":"none"});
                  $("#fl115").css({"display":"none"}); 
                  $("#sc104").css({"display":"none"});
                  $("#DV").css({"display":"none"}); 
                  $("#CH").css({"display":"none"}); 
                  
      }
}
});
</script>

Open in new window

0
mlg101Author Commented:
I tried the above code and I get an error at runtime, saying "object expected".
Its says its on line 1737, which is:                     <select name="ctl00$ContentPlaceHolder1$tabcontainer1$tabpanel3$POS" id="ctl00_ContentPlaceHolder1_tabcontainer1_tabpanel3_POS"  onchange="showhide this);">

But I assume it expects an object that is not there in the javascript code.

Any idea what object is missing?
0
Mahdii7Commented:
I apologize, but I don't know what to tell you. The above script will work with a well-structured XHTML markup. I suggest looking at the jQuery documentation, and trying to adapt some basic dynamic CSS to your current script. It will be worth it.

If you want to refund your points and re-post since I spammed the hell out of you, I give you my blessing ;)

Take care,
M
0
mlg101Author Commented:
i have plenty of points to go around. What i need is someone who knows javascript well enough to find the error. I'll keep looking. Thanks for trying.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.