• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

Menu expand/collapse

How do you create a menu that contains a list of categories (in a left vertial menu) which shows/hides subcategories for the category clicked?

Item 1
Item 2 (clicked)
   Subitem2-1
   Subitem2-2
Item3
Item4

Where subitems are hidden initially

Thanks!
0
NerdsOfTech
Asked:
NerdsOfTech
  • 2
2 Solutions
 
wellholeCommented:
0
 
Bobaran98Commented:
Here's some basic HTML / JavaScript that should get you started on this.  If you're comfortable with generating a dataset (from database, XML, etc) and looping through it, I think you'll see the ease with which the following code can be adapted to generate a dynamic menu.  But obviously you can just hard code it too.
I believe this is cross-browser compatible.

<HTML>
 <HEAD>
  <TITLE> Expand / Collapse </TITLE>
 
	<script language="javascript1.2">
	function expandCollapse(objID) {
		var kids = document.getElementById(objID+"kids");
		var btn = document.getElementById(objID+"btn");
		if(btn.value=="Expand") {
			kids.style.display = "";
			btn.value = "Collapse";
		} else {
			kids.style.display = "none";
			btn.value = "Expand";
		}
	}
	</script>
 
 </HEAD>
 
 <BODY>
  
<table border="1" width="400">
<tr id="row1"><td>Category 1 <input id="row1btn" type="submit" onclick="expandCollapse('row1');" value="Expand"><td></tr>
<tr id="row1kids" style="display:none"><td align="right">
	<table border="1" width="90%">
		<tr id="row1_1"><td>Subcategory 1</td></tr>
		<tr id="row1_2"><td>Subcategory 2 <input id="row1_2btn" type="submit" onclick="expandCollapse('row1_2');" value="Expand"></td></tr>
		<tr id="row1_2kids" style="display:none"><td align="right">
			<table border="1" width="90%">
				<tr id="row1_2_1"><td>Item 1</td></tr>
				<tr id="row1_2_1"><td>Item 2</td></tr>
			</table>
		</tr>
		<tr id="row1_3"><td>Subcategory 3</td></tr>
	</table>
</tr>
<tr id="row2"><td>Category 2 <input id="row2btn" type="submit" onclick="expandCollapse('row2');" value="Expand"><td></tr>
<tr id="row2kids" style="display:none"><td align="right">
	<table border="1" width="90%">
		<tr><td>Subcategory 1</td></tr>
		<tr><td>Subcategory 2</td></tr>
	</table>
</tr>
</table>
 
 </BODY>
</HTML>

Open in new window

0
 
Bobaran98Commented:
Ok, I just tested, and it works fine in IE, FireFox, Opera, and Chrome.  I did, however, catch that I had a few errors in my table tags which only showed up in Chrome.  The following code is almost identical to the above, but with those minor fixes.
<HTML>
 <HEAD>
  <TITLE> Expand / Collapse </TITLE>
 
	<script language="javascript1.2">
	function expandCollapse(objID) {
		var kids = document.getElementById(objID+"kids");
		var btn = document.getElementById(objID+"btn");
		if(btn.value=="Expand") {
			kids.style.display = "";
			btn.value = "Collapse";
		} else {
			kids.style.display = "none";
			btn.value = "Expand";
		}
	}
	</script>
 
 </HEAD>
 
 <BODY>
  
<table border="1" width="400">
<tr id="row1"><td>Category 1 <input id="row1btn" type="submit" onclick="expandCollapse('row1');" value="Expand"></td></tr>
<tr id="row1kids" style="display:none"><td align="right">
	<table border="1" width="90%">
		<tr id="row1_1"><td>Subcategory 1</td></tr>
		<tr id="row1_2"><td>Subcategory 2 <input id="row1_2btn" type="submit" onclick="expandCollapse('row1_2');" value="Expand"></td></tr>
		<tr id="row1_2kids" style="display:none"><td align="right">
			<table border="1" width="90%">
				<tr id="row1_2_1"><td>Item 1</td></tr>
				<tr id="row1_2_1"><td>Item 2</td></tr>
			</table>
		</tr>
		<tr id="row1_3"><td>Subcategory 3</td></tr>
	</table>
</td></tr>
<tr id="row2"><td>Category 2 <input id="row2btn" type="submit" onclick="expandCollapse('row2');" value="Expand"></td></tr>
<tr id="row2kids" style="display:none"><td align="right">
	<table border="1" width="90%">
		<tr><td>Subcategory 1</td></tr>
		<tr><td>Subcategory 2</td></tr>
	</table>
</td></tr>
</table>
 
 </BODY>
</HTML>

Open in new window

0
 
NerdsOfTechTechnology ScientistAuthor Commented:
Thank you both for your response. Thank you Well for the link & Bob for the coded example!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now