[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1390
  • Last Modified:

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>
0
mlg101
Asked:
mlg101
  • 6
  • 4
2 Solutions
 
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now