asked on

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>

SOLUTION

Mahdii7

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Mahdii7

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

Mahdii7

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

mlg101

ASKER

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.

mlg101

ASKER

Mahdii7

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

Mahdii7

<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

mlg101

ASKER

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?

Mahdii7

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

ASKER CERTIFIED SOLUTION

mlg101

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial