Javascript to show panel options

[gyannitin]

Hi,
I have a section, suppose A and it has 3 sub sections B,C and D. I want only A to be displayed in the left panel and on clicking it, B , C and D should appear.B,C and D will have hyperlinks. Any pointers will be very usefull.

Thanks

[bvelez352]

so basically what you want is a drop down on click? JavaScript is still a bit tricky for me, but here is what I would do with jQuery

html

<ul id='dropDown'>
    <li><a href="#"> section A </a>
        <ul id='subMenu'> 
            <li><a href="#"> section B </a></li>
            <li><a href="#"> section C </a></li>
            <li><a href="#"> section D </a></li>
       	</ul>
     </li>
</ul>

CSS

ul{
	list-style:none;
}

jQuery

$(document).ready(function(){
	$('ul#subMenu').hide();
	$('ul#dropDown li a').click(function(){
		$(this).next('ul').slideToggle();
		return false;	
	});
});

the return false is so the link doesn't try to direct you to href #, if you want it to have a link, just delete that part

demo

[gyannitin]

Hi,
Thanks for responding. My requirement is that - Only section A should be seen. On clicking the section A , Section B and rest should be displayed - as you are displaying now(under UL and LI). I dont have much idea of JQuery. How should I use your last code. Please guide...

[bvelez352]

if you look at the demo you can see that only section A is visible until you click on it. To you jQuery you must link the library like so:

<script src="foldername/jquery.js" type="text/javascript"></script>

to download the jQuery library go to jquery.com

anything else let me know

[gyannitin]

Hi,
Thanks ....
This is what I was looking for ... Thanks a lot.

[gyannitin]

Hi,
I am now facing one more issue in this. ...

<ul id='dropDown'>
<li><a href="#" class="Section_Navigation"> Access </a>
<ul id='subMenu'>
<li><a href="#" class="Section_Navigation"> Grant Access </a></li>
<li><a href="Update_Access.jsp" class="Section_Navigation"> Update Access </a></li>
<li><a href="Revoke_Access.jsp" class="Section_Navigation"> Revoke Access </a></li>
</ul>
</li>
</ul>

[gyannitin]

When I am clicking the links, its not working. but on opening them in new tab - it works. I want hyperlink to work.

For EX - On clicking Update Access, Update Access.jsp should work. its not working as expected.

[bvelez352]

remove the

return false

code and the link should work

[gyannitin]

You are a genius dude ... Thanks.

[bvelez352]

No problem!

[gyannitin]

Hi, there is one more bug here. I have many other sections too. In your demo, I replicated everything but only for the first one it worked ....

In the output I have
Section A
Section B
Section B1
Section B2
Section B3

On clicking section A, sub articles are coming but not for others. Hope I didn't confuse ....

[bvelez352]

I've never tried to do a sub-subMenu... I'll get into this and let you know... It might even be better if you do with css, unless you want a sliding effect

[gyannitin]

Hi,
I don't want sub-sub menu. Whatever demo u sent to me, It has only one item. If you repeat the same then the next item won't work. I have already sent you the code. On executing it, you will get to know..