Show/Hide Div's using Drop-Down Menu Form

**RhysG** · 10-04-2006, 12:20 AM

Hi There,

Does anybody know how to make collapsible tables (Show/Hide div's) with a HTML Drop-Down Menu Form?

Ive been looking everywhere but with no luck at all. Most of the info i find is for dhtml menus but i need this to work using a standard html form Drop-Menu.

Any help or location of a script would be much helpful.

Cheers.

**funkdaddu** · 10-04-2006, 12:34 AM

By "HTML Drop-Down Menu Form" do you mean a select box Like this:

Code:

<select name="asd">
<option value="one">1</option>
<option value="two">2</option>
</select>

**ADAM Web Design** · 10-04-2006, 01:30 AM

<select name="formField" onchange="Javascript function to show or hide divs here">

That would do it.

**RhysG** · 10-04-2006, 02:21 AM

Thanks for your quick help... Youv'e put me in the right direction, but do you know of a good script or even a tutorial that can help me get this working right im learning and this will be great way to know in future.

**funkdaddu** · 10-04-2006, 09:47 AM

Something like this?:

HTML Code:

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

<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
		<title>Untitled Page</title>
		<script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
	// hide last div
	if (lastDiv) {
		document.getElementById(lastDiv).className = "hiddenDiv";
	}
	//if value of the box is not nothing and an object with that name exists, then change the class
	if (divName && document.getElementById(divName)) {
		document.getElementById(divName).className = "visibleDiv";
		lastDiv = divName;
	}
}
//-->
</script>
		<style type="text/css" media="screen"><!--
.hiddenDiv {
	display: none;
	}
.visibleDiv {
	display: block;
	border: 1px grey solid;
	}

--></style>
	</head>

	<body bgcolor="#ffffff">
		<form id="FormName" action="blah.php" method="get" name="FormName">
			<select name="selectName" size="1" onchange="showDiv(this.value);">
				<option value="">Choose One...</option>
				<option value="one">first</option>
				<option value="two">second</option>
				<option value="three">third</option>
			</select>
		</form>
		<p id="one" class="hiddenDiv">This is paragraph 1.</p>
		<p id="two" class="hiddenDiv">This is paragraph 2.</p>
		<p id="three" class="hiddenDiv">This is paragraph 3.</p>		
	</body>

</html>

**seomumbai** · 10-17-2006, 01:56 AM

When you select a item in a dropdown menu list then you can hide the tables by using If condition's.

**bmcoll3278** · 10-18-2006, 12:48 AM

I did it with this script
http://javascript.internet.com/css/page-organizer.html

I just put the info in the links into a java drop down menu so instead of clicking the link you select it from the drop down

**seomumbai** · 10-19-2006, 02:50 AM

I think you can use If Else conditions in html also in ASP.NET.