Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Menu expand/collapse

Posted on 2009-05-08
4
Medium Priority
?
549 Views
Last Modified: 2013-12-12
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
Comment
Question by:NerdsOfTech
  • 2
4 Comments
 
LVL 9

Assisted Solution

by:wellhole
wellhole earned 600 total points
ID: 24338590
0
 
LVL 8

Expert Comment

by:Bobaran98
ID: 24339999
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
 
LVL 8

Accepted Solution

by:
Bobaran98 earned 1400 total points
ID: 24340032
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
 
LVL 20

Author Closing Comment

by:NerdsOfTech
ID: 31579564
Thank you both for your response. Thank you Well for the link & Bob for the coded example!
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question