Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Hide or show multiple dropdown OnChange of multiple dropdowns (possible ??)

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 03-08-2013, 08:51 AM   PM User | #1
Reflo2
New Coder

 
Join Date: Mar 2013
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Reflo2 is an unknown quantity at this point
Hide or show multiple dropdown OnChange of multiple dropdowns (possible ??)
Hi all

I posted this same question in another forum but I think it was in the wrong place - so sorry for butting into yours :-)


Without placing lots of Divs within each Div, is there a way to hide or show dropdowns where there are multiple drops on a form.

I can do with by placing a seperate Javescript for each line 9div) but I was thinking there MUST be a better way of doing this.

Does anyone have any ideas or a link to a page that gives details

Thanks

Karen





If you cut and past this code you'll see what I mean - I want to show or hide certain dropdowns OnChange of an other dropdown



Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language="C#" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>test</title>
<script type="text/javascript">
function selectlines() {
var numdivs = 3;
var num = document.getElementById("DropDownList0").value;
for (var i =1; i<=numdivs; i++) {
var which = "line" + i;  
document.getElementById(which).style.display = num>=i? "block" : "none";
}}
</script>

</head>

<body>
<form id="form1" runat="server">
	Select lines to view
	<asp:DropDownList id="DropDownList0" runat="server" onchange="selectlines();" >
		<asp:listitem Value="0"></asp:listitem>
		<asp:listitem>1</asp:listitem>
		<asp:listitem>2</asp:listitem>
		<asp:listitem>3</asp:listitem>
	</asp:DropDownList>
<br /><br />
<div id="line1" style="display:none">
	<asp:DropDownList id="DropDownList1" runat="server">
		<asp:listitem>select</asp:listitem>
		<asp:listitem>Show 1st dropdown</asp:listitem>
		<asp:listitem>Show no dropdowns</asp:listitem>
		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line1_DDL_1" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line1_DDL_2" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line1_DDL_3" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
	&nbsp;<asp:DropDownList id="Line1_DDL_4" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
</div>
<br />
<div id="line2" style="display:none">
	<asp:DropDownList id="DropDownList2" runat="server" >
		<asp:listitem>select</asp:listitem>
		<asp:listitem>Show 1st dropdown</asp:listitem>
		<asp:listitem>Show no dropdowns</asp:listitem>
		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line2_DDL_1" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line2_DDL_2" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line2_DDL_3" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
	&nbsp;<asp:DropDownList id="Line2_DDL_4" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
</div>
<br />
<div id="line3" style="display:none">
	<asp:DropDownList id="DropDownList3" runat="server">
		<asp:listitem>select</asp:listitem>
		<asp:listitem>Show 1st dropdown</asp:listitem>
		<asp:listitem>Show no dropdowns</asp:listitem>
		<asp:listitem>Show 2nd and 3rd dropdown</asp:listitem>
		<asp:listitem>Show all dropdowns except 1st</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line3_DDL_1" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line3_DDL_2" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
&nbsp;<asp:DropDownList id="Line3_DDL_3" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>
	&nbsp;<asp:DropDownList id="Line3_DDL_4" runat="server">
		<asp:listitem>Select</asp:listitem>
		<asp:listitem>Item 1</asp:listitem>
		<asp:listitem>Item 2</asp:listitem>
		<asp:listitem>Item 3</asp:listitem>
	</asp:DropDownList>

</div>
	<br />
</form>
</body>

</html>
Reflo2 is offline   Reply With Quote
Old 03-08-2013, 06:53 PM   PM User | #2
sbhmf
New Coder

 
Join Date: Jan 2013
Location: Sunnyvale, CA
Posts: 44
Thanks: 3
Thanked 1 Time in 1 Post
sbhmf is an unknown quantity at this point
asp:dropdown objects turn into regular selection controls in the rendered HMTL.

Group them all with a common name attribute-value, then use javascript's getElementsByTagName to access them. A function can receive arguments identifying which ones are to be hidden. Commence by looping through them and setting them all to style.display = 'inline', with the exception of those in the argument list that are to be styled display = "none".

...of course, there's more ways than one to skin a cat.
sbhmf is offline   Reply With Quote
Old 03-08-2013, 07:20 PM   PM User | #3
Reflo2
New Coder

 
Join Date: Mar 2013
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Reflo2 is an unknown quantity at this point
Hi

THanks for the help. I am new to JS so this is all a little strange (I'm a quick learner though :-)

I had a look at
http://www.w3schools.com/jsref/met_d...sbytagname.asp
and even that seem to produce the wrong results (there are only 3 inputs but the results is 4)

Do you (or anyone) have a link to a site that may give some example which I can study and learn from.

Thanks again

Karen
Reflo2 is offline   Reply With Quote
Old 03-09-2013, 03:00 AM   PM User | #4
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
Lightbulb
Quote:
Originally Posted by Reflo2 View Post
Hi

THanks for the help. I am new to JS so this is all a little strange (I'm a quick learner though :-)

I had a look at
http://www.w3schools.com/jsref/met_d...sbytagname.asp
and even that seem to produce the wrong results (there are only 3 inputs but the results is 4)

Do you (or anyone) have a link to a site that may give some example which I can study and learn from.

Thanks again

Karen
Look at the code again.
There are 4 <input> tags. 3 are type="text" and the 4th is type="button"
If you want to see '3', then you need extra logic.

Play with the code...
Code:
<html>
<head>
<script>
function getElements() {
  var x=document.getElementsByTagName("input"); alert(x.length + ' total in script');
  var count = 0;
  for (var i=0; i<x.length; i++) { 
    if (x[i].type == 'text') { count++; }
  }
  alert(count+' total visible for keyboard text entry');
}
</script>
</head>
<body>

<input type="text" size="20"><br>
<input type="text" size="20"><br>
<input type="text" size="20"><br><br>
<input type="button" onclick="getElements()" value="How many input elements?">

</body>
</html>
Last edited by jmrker; 03-09-2013 at 03:11 AM..
jmrker is offline   Reply With Quote
Old 03-10-2013, 10:45 AM   PM User | #5
Reflo2
New Coder

 
Join Date: Mar 2013
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Reflo2 is an unknown quantity at this point
I have done some (a lot) of studying and have come up with this, which "almost" works.

I have tried to use naming conventios but this failed.

I would like the dropdowns to appear for each record/input/line (sorry I can't think of the name), but all the JS applies to the first only.

Any ideas would be a great help

Thanks

Karen

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<meta content="text/html;charset=iso-8859-1" http-equiv="content-type">
<title>Untitled Page</title>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}

</script>
<style type="text/css">
.hiddenDiv {
	display: none;
}
.visibleDiv {
	display: block;
}

</style>
</head>

<body>

<form id="form1" runat="server">
	<div id="Div1">
		<table>
			<tr>
				<td>
				<table style="width: 100%">
					<tr>
						<td>Detail</td>
						<td>Select</td>
					</tr>
					<tr>
						<td>
						<asp:TextBox id="TextBox1" runat="server" Width="179px"></asp:TextBox>
						</td>
						<td>
						<select name="select" onchange="showDiv(this.value);">
						<option value=""></option>
						<option value="one">Show 1st</option>
						<option value="two">Show 2nd to 4th</option>
						<option value="two">Show 2nd to 4th</option>
						</select></td>
					</tr>
				</table>
				</td>
				<td>
				<div id="one" class="hiddenDiv">
					<table>
						<tr>
							<td>1st</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL1st_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				<div id="two" class="hiddenDiv">
					<table>
						<tr>
							<td>2nd</td>
							<td>3rd</td>
							<td>4th</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL2nd_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
					
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL3rd_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL4th_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="Div2">
		<table>
			<tr>
				<td>
				<table style="width: 100%">
					<tr>
						<td>Detail</td>
						<td>Select</td>
					</tr>
					<tr>
						<td>
						<asp:TextBox id="TextBox2" runat="server" Width="179px"></asp:TextBox>
						</td>
						<td>
						<select name="selectName" onchange="showDiv(this.value);">
						<option value=""></option>
						<option value="one">Show 1st</option>
						<option value="two">Show 2nd to 4th</option>
						<option value="two">Show 2nd to 4th</option>
						</select></td>
					</tr>
				</table>
				</td>
				<td>
				<div id="one" class="hiddenDiv">
					<table>
						<tr>
							<td>1st</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL1st_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				<div id="two" class="hiddenDiv">
					<table>
						<tr>
							<td>2nd</td>
							<td>3rd</td>
							<td>4th</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL2nd_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
					
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL3rd_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL4th_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				</td>
			</tr>
		</table>
	</div>
</form>

</body>

</html>
Reflo2 is offline   Reply With Quote
Old 03-10-2013, 07:46 PM   PM User | #6
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,379
Thanks: 3
Thanked 466 Times in 453 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
best to avoid global variables(declared outside a function)

Code:
function showDiv(divName) {
    var div=document.getElementById(divName);
	if (showDiv.lastDiv) {
		showDiv.lastDiv.className = "hiddenDiv";
	}
	if (div) {
		div.className = "visibleDiv";
		showDiv.lastDiv = div;
	}
}
uses a property of the function to store the lastDiv
and a local variable to reduce the code size
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Old 03-11-2013, 07:40 AM   PM User | #7
Reflo2
New Coder

 
Join Date: Mar 2013
Posts: 11
Thanks: 2
Thanked 0 Times in 0 Posts
Reflo2 is an unknown quantity at this point
Hi VWPhilps

Thank you for the tip.

But this still leave the same problem.

The function doesn't point (I can't think of a better word) at the specific dropdown.

So if you select something on the 2nd drop down it will affect the divs that are shown in the 1st div.

There will be around 8 or 9 divs on the form I'm making each with:
Details, Select dropdown and then a number of options to choose from.

I need the function to point "only" at the line being used by the users.

Here is the amended code, given by you, and thanks for this.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>

<head>
<meta content="text/html;charset=iso-8859-1" http-equiv="content-type">
<title>Untitled Page</title>
<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}

</script>
<style type="text/css">
.hiddenDiv {
	display: none;
}
.visibleDiv {
	display: block;
}

</style>
</head>

<body>

<form id="form1" runat="server">
	<div id="Div1">
		<table>
			<tr>
				<td>
				<table style="width: 100%">
					<tr>
						<td>Detail</td>
						<td>Select</td>
					</tr>
					<tr>
						<td>
						<asp:TextBox id="TextBox1" runat="server" Width="179px"></asp:TextBox>
						</td>
						<td>
						<select name="select" onchange="showDiv(this.value);">
						<option value=""></option>
						<option value="one">Show 1st</option>
						<option value="two">Show 2nd to 4th</option>
						<option value="two">Show 2nd to 4th</option>
						</select></td>
					</tr>
				</table>
				</td>
				<td>
				<div id="one" class="hiddenDiv">
					<table>
						<tr>
							<td>1st</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL1st_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				<div id="two" class="hiddenDiv">
					<table>
						<tr>
							<td>2nd</td>
							<td>3rd</td>
							<td>4th</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL2nd_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
					
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL3rd_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL4th_1" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				</td>
			</tr>
		</table>
	</div>
	<div id="Div2">
		<table>
			<tr>
				<td>
				<table style="width: 100%">
					<tr>
						<td>Detail</td>
						<td>Select</td>
					</tr>
					<tr>
						<td>
						<asp:TextBox id="TextBox2" runat="server" Width="179px"></asp:TextBox>
						</td>
						<td>
						<select name="selectName" onchange="showDiv(this.value);">
						<option value=""></option>
						<option value="one">Show 1st</option>
						<option value="two">Show 2nd to 4th</option>
						<option value="two">Show 2nd to 4th</option>
						</select></td>
					</tr>
				</table>
				</td>
				<td>
				<div id="one" class="hiddenDiv">
					<table>
						<tr>
							<td>1st</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL1st_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				<div id="two" class="hiddenDiv">
					<table>
						<tr>
							<td>2nd</td>
							<td>3rd</td>
							<td>4th</td>
						</tr>
						<tr>
							<td>
							<asp:DropDownList id="DDL2nd_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
					
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL3rd_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
							<td>
							<asp:DropDownList id="DDL4th_2" runat="server" Width="60px">
					<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:listitem>5</asp:listitem>
							</asp:DropDownList>
							</td>
						</tr>
					</table>
				</div>
				</td>
			</tr>
		</table>
	</div>
</form>

</body>

</html>
Reflo2 is offline   Reply With Quote
Old 03-11-2013, 08:53 AM   PM User | #8
siberia-man
Regular Coder

 
Join Date: Sep 2010
Location: Far far away
Posts: 122
Thanks: 0
Thanked 16 Times in 16 Posts
siberia-man is on a distinguished road
Quote:
Originally Posted by Reflo2 View Post
is there a way to hide or show dropdowns where there are multiple drops on a form.
Answering for your question. These links below have some information related to your question.
http://www.codingforums.com/showpost...0&postcount=13
http://www.codingforums.com/showpost...2&postcount=15

if you find them useful and applicable to your task just try to adapt it to your task. Be sure it works with more than one toggler per page.
siberia-man is offline   Reply With Quote
Old 03-12-2013, 05:17 AM   PM User | #9
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,797
Thanks: 30
Thanked 462 Times in 456 Posts
jmrker will become famous soon enough
Lightbulb
Quote:
Originally Posted by siberia-man View Post
Answering for your question. These links below have some information related to your question.
http://www.codingforums.com/showpost...0&postcount=13
http://www.codingforums.com/showpost...2&postcount=15

if you find them useful and applicable to your task just try to adapt it to your task. Be sure it works with more than one toggler per page.
Here's a modification to the second link from above that you may find interesting...
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> CSS toggler </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
/* This rule will be applied to hide element on the page */
 .hidden { display: none; }
</style>

<script type="text/javascript">

// Checks that the class 'className' is defined for the element 'el'
function hasClass(el, className) {
    var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
    return re.test(el.className);
};

// Adds the class 'className' to the element 'el'
function addClass(el, className) {
    if ( ! hasClass(el, className) ) {
        el.className += ' ' + className;
    }
};

// removes the class 'className' from the element 'el'
function delClass(el, className) {
    var re = new RegExp('(?:^|\\s+)' + className + '(?:\\s+|$)', 'g');
    el.className = el.className.replace(re, ' ');
};

// Toggles the class 'className' to the element 'el'
function toggleClass(el, className) {
    if ( hasClass(el, className) ) { delClass(el, className); }
                              else { addClass(el, className);
    }
};

</script>
</head>
<body>

<div id="togglerInformation">
 <h2>Click to toggle the 'Lorem Ipsum' text</h2>
 <div id="toggled_0" class="hidden" style="height:100px; width:400px; border:1px solid  blue; overflow:auto; ">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>

 <h2>Click to toggle Shakespeare's quotation</h2>
 <pre id="toggled_1" class="hidden">
  To be, or not to be, that is the question;
  Whether 'tis nobler in the mind to suffer
  The Slings and Arrows of outrageous Fortune
  Or to take arms against a sea of troubles,
  And by opposing, end them. To die, to sleep;
  No more; and by a sleep to say we end
  The heart-ache and the thousand natural shocks
  That flesh is heir to — 'tis a consummation
 </pre>
</div>

<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?p=1319625#post1319625
// and from: http://www.codingforums.com/showpost.php?p=1005402&postcount=15

( function () {
/* After the page will be downloaded define the event onclick for 
 * the 'h1' element that will toggle visibility of another element -- 'div' or 'pre' */

  window.onload = function() {
    var togglers = document.getElementById('togglerInformation').getElementsByTagName('h2');
    for (var i=0; i<togglers.length; i++) { togglers[i].id = 'toggler_'+i; togglers[i].value = 'toggled_'+i; } 
    for (var i=0; i<togglers.length; i++) {
      document.getElementById(togglers[i].id).onclick = function() { tBtoggled(this.value); }
    }
  };
  function tBtoggled(IDS) { toggleClass(document.getElementById(IDS), 'hidden'); }
} )();
</script>

</body>
<html>
jmrker is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:57 PM.
Advertisement
Log in to turn off these ads.