jQuery toggle element with same class

StackOverflow https://stackoverflow.com/questions/22465912

Question

I have some nested lists that are hidden.

When the parent li is clicked then sublist should be shown.

If another parent li is clicked then any open sublists should shut and only the sublist closest to the clicked parent li should open.

I can get all of the above to work, however, if I click on a parent li and expand the sublist, if I then click the same parent li to close the sublist , the sublist shuts and then opens again.

Any ideas how I can get this to work?

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile Nav New</title>
<style>
.sub_list, .sub_sub_list {display:none;}
</style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script> 
    $(document).ready(function($) {
        $(".sub_list").slideUp();
        $(".parent_click").click(function() {
            $(".sub_list").slideUp();
            $(this).closest(".parent").find(".sub_list").slideDown();

        return false;
  });
  $(".sub_click").click(function() {
        $(".sub_sub_list").slideUp();
        $(this).closest(".test").find(".sub_sub_list").slideDown();
  });
});
</script>

<body>

<div class="nav">
    <ul>
        <li class="parent">
            <a href="#" class="parent_click">Driving</a>
            <ul class="sub_list">
                <li class="test">
                    <a href="#" class="sub_click">Type of Car</a>
                    <ul class="sub_sub_list">
                        <li>List 1</li>
                        <li>List 2</li>
                        <li>List 3</li>                        
                    </ul>
                </li>
                <li class="test">
                    <a href="#" class="sub_click">Tracks</a>
                    <ul class="sub_sub_list">
                        <li>List 1</li>
                        <li>List 2</li>
                        <li>List 3</li>                        
                    </ul>                
                </li>
                <li class="teset">Type of driving</li>
            </ul>
        </li>            
        <li class="parent">
            <a href="#" class="parent_click">Flying</a>
            <ul class="sub_list">
                <li>Type of aircraft</li>
                <li>Type of flying</li>
            </ul>
        </li>            
        <li class="parent">
            <a href="#" class="parent_click">Pampering</a>
            <ul class="sub_list">
                <li>Pampering Type</li>
                <li>Treatment Type</li>
            </ul>
        </li>            
    </ul>
</div>
</body>

JS fiddle is here: http://jsfiddle.net/Q53AJ/

Was it helpful?

Solution

I changed a little bit your code.

It seems that the error is not excluding the clicked element of the slideUp

So i added

$(".parent_click").not(this).next().slideUp()

Also using slideToggle() will do the work to close or open the current <ul>

To exclude it from the selected elements. The same was made on the $(".sub_click").click()

Fiddle

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top