| janehollin |
11-30-2012 09:30 AM |
Hide / show divs - cut down my LONG code :-)
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>
|
