jQuery accordion collapse the siblings

0
votes

I have written a simple accordion menu with jquery myself for the following html structure:

<ul class="menu">
    <li><a href="#">menu1</a></li>
    <li class="expanded">
        <a href="#">menu2</a>
        <ul class="menu">
            <li><a href="#">menu 2.1</a></li>
            <li><a href="#">menu 2.2</a></li>
            <li><a href="#">menu 2.3</a></li>
        </ul>

    </li>
    <li><a href="#">menu3</a></li>
    <li class="expanded">
        <a href="#">menu4</a>
        <ul class="menu">
            <li><a href="#">menu 4.1</a></li>
            <li><a href="#">menu 4.2</a></li>
        </ul>            
    </li>
    <li class="expanded">
        <a href="#">menu5</a>
        <ul class="menu">
            <li><a href="#">menu 5.1</a></li>
            <li><a href="#">menu 5.2</a></li>
        </ul>            
    </li>  

</ul>

jquery:

$(function(){

   $('li.expanded > ul').hide();   
   $('li.expanded > a').click(function(){

     $(this).next().slideToggle();

   });
});

http://jsfiddle.net/d57Xv/1/

Now, when I click on the menu2, it opens as expected, when I click the next menu4, I wish the menu2 and the rest of all the opened menu will automatically close it back or collapse. I wonder how to achieve it.

4
jqueryhtmlaccordion

4 Answers

0
votes

Try it like this:

    $(function(){

       $('li.expanded > ul').hide();   
       $('li.expanded > a').click(function(){

         $('li.expanded > ul').not(':hidden').slideToggle();
         $(this).next().slideToggle();


       });
    });
0
votes

Try this : 

$(function(){

   $('li.expanded > ul').hide();   
   $('li.expanded > a').click(function(){
     $('li.expanded > a').next().slideUp();
     $(this).next().slideToggle();

   });
});
0
votes

Try

$(function () {
    var $subs = $('li.expanded > ul').hide();
    $('li.expanded > a').click(function () {
        var $ub = $(this).next().stop(true, true).slideToggle();
        $subs.not($ub).hide();
    });
});

Demo: Fiddle

0
votes

Try

fiddle Demo

$('li.expanded > ul').not($(this).next()).hide(); //instead of .hide() you can use .slideDown()

$(function () {
    $('li.expanded > ul').hide();
    $('li.expanded > a').click(function () {
        $('li.expanded > ul').not($(this).next()).hide(); //added here
        $(this).next().stop(true, true).slideToggle();
    });
});