[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 385
  • Last Modified:

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
0
niceoneishere
Asked:
niceoneishere
1 Solution
 
LZ1Commented:
We really need to see the CSS as well. But the best thing would be a live link
0
 
niceoneishereAuthor Commented:
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

0
 
LZ1Commented:
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
niceoneishereAuthor Commented:
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
0
 
LZ1Commented:
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.
0
 
COBOLdinosaurCommented:
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&
0
 
niceoneishereAuthor Commented:
Thanks for the tip my mistake i changed to css class.
0
 
lightspeedvtCommented:
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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