asked on

Show Sub Menu only when its Parent menu is clicked

I have simple menu like below

	<div class="menuitems" id="scats13">
	  <ul id="springMenu13" class="springMenu">
	    <li id="li-55"><a id="a55" href="/browse/cats.aspx?cid=55&bid=2" class="text">Parent Category 1</a></li>
		<li id="li-56"><a id="a56" href="/browse/cats.aspx?cid=56&bid=2" class="text">Parent Category 2</a>
	     <ul id="sub-menu">
		 <li id="li79"><a id="a79" href="/browse/cats.aspx?cid=79&bid=2" class="text">Child Category</a></li>
		 </ul>
		</li>
		<li id="li-60"><a id="a60" href="/browse/cats.aspx?cid=60&bid=2" class="text">Parent Category 3</a></li>
		<li id="li-61"><a id="a61" href="/browse/cats.aspx?cid=61&bid=2" class="text">Parent Category 4</a></li>
		<li id="li-76"><a id="a76" href="/browse/cats.aspx?cid=76&bid=2">Parent Category 5</a>
		 <ul id="sub-menu">
		  <li id="li80"><a id="a80" href="/browse/cats.aspx?cid=80&bid=2" class="text">Child Category 1</a></li>
		  <li id="li81"><a id="a81" href="/browse/cats.aspx?cid=81&bid=2" class="text">Child Category 2</a></li>
		  <li id="li82"><a id="a82" href="/browse/cats.aspx?cid=82&bid=2" class="text">Child Category 3</a></li>
		  <li id="li83"><a id="a83" href="/browse/cats.aspx?cid=83&bid=2" class="text">Child Category 4</a></li>
		 </ul>
		</li>
		<li id="li-72s"><a id="as72" href="/browse/cats.aspx?cid=72&bid=5" class="text">Parent Category 6</a></li>
	  </ul>
	</div>

Open in new window

as you can see for parent category 2 and parent category 5 there are sub menus. I would like to show that sub menu only when the parent category is clicked or one of the sub menu is clicked

So for example If I click on Parent Category 5 or its sub categories I want to show the sub menu of parent category 5. and hide the rest of the sub menus for other parent categories basically like expanded tree

Is this possible using Pure CSS or even jQuery.

Thanks

LZ1

We really need to see the CSS as well. But the best thing would be a live link

Tammu

ASKER

Thanks for replying, I can't show you a live link as its on my localhost, sorry.

but here is the CSS for the menu

#springMenu13
{
	padding: 0;
	margin:0;
}
#springMenu13 li
{
	list-style:none;
	margin-bottom: 2px;
    margin-top: 0;
	padding-left: 6px;
	padding-right: 2px;
	width: 100%;
}

#springMenu13 ul#sub-menu 
{
  display:block;
  padding-left:12px;
}

Open in new window

LZ1

So like a directory tree?

Like this? http://www.htmldrive.net/items/show/104/jQuery-simple-Tree-Menu.html

Tammu

ASKER

Very similar but for example in the demo link you have sent, when images is clicked, only its submenu should be displayed and other sub menus closed.

Thanks

LZ1

We'd have to see what code your working with in order to do all that. That demo above isn't bad. It can probably be configured to do what you want.

COBOLdinosaur

First let's fix the error... you have the id "sub-menu" on more than one element. An id must be unique. It can only be applied to one element in a page. To apply the same CSS rules to more than one element you must use a class.

Cd&

Tammu

ASKER

Thanks for the tip my mistake i changed to css class.

ASKER CERTIFIED SOLUTION

lightspeedvt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial