...

View Full Version : 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.



<!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:-


<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum