Solved

Menu expand/collapse

Posted on 2009-05-08
4
527 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 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

920 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now