Hide / show divs - cut down my LONG code :-)

janehollin · 11-30-2012, 09:30 AM

HI

Sorry to but into your forum but this seems like a good place to ask - hope you don't mind.

I have a form with a simple DDL with numbers 1,2,3,4, etc.
OnChange this displays certain hidden Divs.

This works fine

Bit I am looking for a way to cut down the load time.

The code is fine for say 4 or even 8 hidden Div but what if I have (for example) 40 or 50.

How can I cut this javascript down.

Thanks for looking

Jane

If you load this into a blank page you'll see what I doing and how mad it will start to get with more hidden divs.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title></title>
<script language="javascript" type="text/javascript">  
        function showdivs() { 
            var list = document.getElementById("<%=ddlrooms.ClientID%>"); 
            var chosenItemText = list.value; 
            if (chosenItemText == "4") { 
                document.getElementById('MyDivNumber1').style.display = 'inline'; 
                document.getElementById('MyDivNumber2').style.display = 'inline';                 
                document.getElementById('MyDivNumber3').style.display = 'inline';  
                document.getElementById('MyDivNumber4').style.display = 'inline';                  
;                 
            } 
else if (chosenItemText == "3") { 
                document.getElementById('MyDivNumber1').style.display = 'inline'; 
                document.getElementById('MyDivNumber2').style.display = 'inline';                 
                document.getElementById('MyDivNumber3').style.display = 'inline';  
                document.getElementById('MyDivNumber4').style.display = 'none';                   
            } 
else if (chosenItemText == "2") { 
                document.getElementById('MyDivNumber1').style.display = 'inline'; 
                document.getElementById('MyDivNumber2').style.display = 'inline';                 
                document.getElementById('MyDivNumber3').style.display = 'none';  
                document.getElementById('MyDivNumber4').style.display = 'none';                                
            } 
else if (chosenItemText == "1") { 
                document.getElementById('MyDivNumber1').style.display = 'inline'; 
                document.getElementById('MyDivNumber2').style.display = 'none';                 
                document.getElementById('MyDivNumber3').style.display = 'none';  
                document.getElementById('MyDivNumber4').style.display = 'none';                                  
            } 
            
 else if (chosenItemText == "Select") { 
                document.getElementById('MyDivNumber1').style.display = 'none'; 
                document.getElementById('MyDivNumber2').style.display = 'none';                 
                document.getElementById('MyDivNumber3').style.display = 'none';  
                document.getElementById('MyDivNumber4').style.display = 'none';  
        } 
        }         
    </script>
</head>

<body>

<form id="MyForm" runat="server">
	Please select a number
	<asp:DropDownList id="ddlrooms" runat="server" onchange="showdivs();">
		<asp:listitem></asp:listitem>
		<asp:listitem>1</asp:listitem>
		<asp:listitem>2</asp:listitem>
		<asp:listitem>3</asp:listitem>
		<asp:listitem>4</asp:listitem>
	</asp:DropDownList>
	<br />
	<br />
	<div id="MyDivNumber1" style="display: none">
		Hi, I'm Div Number 1<div>
			<br />
			<div id="MyDivNumber2" style="display: none">
				Hi, I'm Div Number 2<div>
					<br />
					<div id="MyDivNumber3" style="display: none">
						Hi, I'm Div Number 3<div>
							<br />
							<div id="MyDivNumber4" style="display: none">
								Hi, I'm Div Number 4<div>
								</div>
							</div>
							<br />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</form>

</body>

</html>

Philip M · 11-30-2012, 02:03 PM

Try this:-

Code:

<html>
<head>
</head>
<body>

<form id="myForm" >

<select id = "mylist" onchange = "showdivs()">
<option value = 0>Please select a number...</option>
<option value = 1>1</option>
<option value = 2>2</option>
<option value = 3>3</option>
<option value = 4>4</option>
</select>
<br><br>	

<div id="MyDivNumber1" style="display: none">	Hi, I'm Div Number 1</div><br>
<div id="MyDivNumber2" style="display: none">	Hi, I'm Div Number 2</div><br>
<div id="MyDivNumber3" style="display: none">	Hi, I'm Div Number 3</div><br>
<div id="MyDivNumber4" style="display: none">	Hi, I'm Div Number 4</div><br>

</form>


<script type = "text/javascript">

function showdivs() {
var numdivs = 4;  // number of divs - could be 50 or as many as you like
var num = document.getElementById("mylist").value;
for (var i =1; i<=numdivs; i++) {
var which = "MyDivNumber" + i;  // naming convention for div ids
document.getElementById(which).style.display = num>=i? "block" : "none";
}
}

</script>

A <div> is a block level element, not inline.

Lady Astor said to Winston Churchill "If I was married to you, I would put poison in your whisky".
To which Churchill replied "If I was married to you, I would drink it".

janehollin · 11-30-2012, 05:32 PM

Thank you

It works really well