Solved

Menu expand/collapse

Posted on 2009-05-08
4
537 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 9

Assisted Solution

by:wellhole
wellhole earned 150 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 350 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 19

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
MySQL limit and not so limited 13 61
PHP Web Development 6 68
Convert php array to comma seperated list 19 54
Undefined variable with $_POST in PHP 5 39
These days socially coordinated efforts have turned into a critical requirement for enterprises.
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 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