How to Control the toggle with anchor tag with href

Question

I am working on a Collapse and Expand functionality using Jquery in my left menu.

Here when user clicks "Parent", would like to show "Admin" and "Account" with anchor tag with url. It is working fine till this point.

If user clicks on "Admin", it is collapsing and showing root element "Parent".

How to hold the structure here.

$(document).ready(function() {
    $('ul.child').hide();

    $('li:has(.child)').click(function() {
        $('ul',this).toggle('slow');
    });

    $('li').click(function(event) {
        event.stopPropagation();
    });

<nav id="nav">
    <ul>
        <li>
            <a>Parent</a>
            <ul class-"child">
                <li class="child"><a href="/Home/Admin">Admin</a></li>
                <li class="child"><a href="/Home/Account">Account</a></li>
            </ul>
        </li>
    </ul>
</nav> 

Without an anchor tag it will work fine but when I include anchor tag with url, "stopPropagation" event over li will fail. That makes it to collapse to the root element.

If User clicks on Admin it will collapse to the root as

.Parent

what to do to hold the structure as below

.Parent
  .Admin
  .Account

Answer 1

Try something like

$('div.toggle').hide();
$('ul.product-info li a').click(function(event) {
    event.preventDefault();
    $(this).next('div').slideToggle(200);
});

Here is the page about that in the jQuery documentation:

http://learn.jquery.com/events/event-basics/#preventdefault

Answer 2

 $(document).ready(function() { $('ul.child').hide(); $('.parent').click(function() { $('ul.child',this.parent).toggle('slow'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="nav"> <ul> <li> <a class="parent">Parent</a> <ul class="child"> <li><a href="#/Home/Admin">Admin</a></li> <li><a href="#/Home/Account">Account</a></li> </ul> </li> </ul> </nav> 

This should work. Your problem is that when you click on li you clicked on parent li before.

Answer 3

Well, Below is the working code for it.

 $(document).ready(function() { $('ul.child').hide(); $('li:has(.child)').click(function() { $('ul',this).toggle('slow'); }); $('li').click(function(event) { event.stopPropagation(); }); }); 

 a{ color: blue; text-decoration: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav id="nav"> <ul> <li> <a>Parent</a> <ul class="child"> <li class="child"><a href="/Home/Admin">Admin</a></li> <li class="child"><a href="/Home/Account">Account</a></li> </ul> </li> </ul> </nav> 

Hoping this will help you :)

Answer 4

As far as I am getting, you click on the "Admin" or "Account", it will redirect to the appropriate page and at the time you want to open up the hierarchy in which it lies.

In this case what you can do is, compare the current url with each a tag in the hierarchy and compare the url. window.location.pathname can be used to get the path you want to compare and each to loop through the a tags. Let me know if you have still doubt in it.