CODEWITHSUNDEEP
jqueryhtmlcss
abcid d
abcid d

Reputation: 2953

One Submenu Open One At a Time & Click to Close

I have a list with submenus. Now I can open one at a time: Click on List 1 will open submenu 1. Click on List 2, submenu 2 will open and submenu 1 is closed automatically.

Problem: I click on List 2 again, submenu 2 should be closed based on the slideToggle(), but it is closed and open right after that.

Please help.

jsfiddle

    $(document).ready(function () {
        $('li a').on('click', function(){
        		$('.square').slideUp();
            $(this).siblings().slideToggle();
        });
    });
    li {padding:20px; border: solid 1px;margin:5px;}
    
    .square {
      display: none;
      border: 1px solid red;
    }
    .active {
      display: block;
      border: 1px solid red;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
        <li>
            <a class="test">Hover List1</a>
            <div class="square">
            Square 1
            </div>
        </li>
        <li>
            <a>Hover List2</a>
            <div class="square">
            Square 2
            </div>
        </li>
        <li>
            <a>Hover List3</a>
            <div class="square">
            Square 3
            </div>
        </li>
        <li>
            <a>Hover List4</a>
            <div class="square">
            Square 4
            </div>
        </li>
    </ul>

Upvotes: 2

Views: 53

Answers (1)

NullPointer
NullPointer

Reputation: 7368

You have to do the slideUp() for div of parent().siblings():

$(this).parent().siblings().find('.square').slideUp();


$(document).ready(function () {
    $('li a').on('click', function(){
   
         $(this).parent().siblings().find('.square').slideUp();

    		
        $(this).siblings().slideToggle();
    });
});
li {padding:20px; border: solid 1px;margin:5px;}

.square {
  display: none;
  border: 1px solid red;
}
.active {
  display: block;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a class="test">Hover List1</a>
        <div class="square">
        Square 1
        </div>
    </li>
    <li>
        <a>Hover List2</a>
        <div class="square">
        Square 2
        </div>
    </li>
    <li>
        <a>Hover List3</a>
        <div class="square">
        Square 3
        </div>
    </li>
    <li>
        <a>Hover List4</a>
        <div class="square">
        Square 4
        </div>
    </li>
</ul>

Upvotes: 1

Related Questions