Jquery Slidetoggle, how to allow to show only one element?

Question

This is my html:

<ul>
    <li>
        List
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </li>

    <li>
        List 2
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
    </li>
</ul>

And this js:

$('ul li ul').hide();

$('ul li').click(function() {
    $(this).children().slideToggle();
});

I want to create slidetoggle, for example: when user click "List" and after open this user click List 2 then list one is hiding.

DEMO: http://jsfiddle.net/7dxAb/ I want only one open when user click.

Thanks!

Answer 1

Try this:

$('ul li ul').hide();

$('ul li').click(function() {
    var _this = $(this);
    _this.children().slideToggle();

    $('ul > li').not(_this).children('ul').slideUp();
});

You hide "ul"s in all ListN elements except one that is clicked.

Answer 2

You can slideUp() all the other ul 's before the slideToggle() like this:

$('ul li').click(function() {
    $(this).parent().find('ul').slideUp();
    $(this).children().slideToggle();
});

I'm not sure if this is the most effecient way tho.

Answer 3

Add

$('ul li ul').slideUp();

to the click event. This will hide the other ul s. The finished code would look like:

$('ul li ul').hide();

$('ul li').click(function() {
    $('ul li ul').slideUp();
    $(this).children().slideToggle();
});

http://jsfiddle.net/yvPFx/2/

Edit : You can use a class to keep track of what is showing. http://jsfiddle.net/yvPFx/3/

Answer 4

Try this:

 $('ul li ul').hide();

 $("ul li").click(function () {
     $(this).children().slideToggle("slow", function() {
        //
      });
     $(this).siblings().children().slideUp("slow");
 });