jquery - Accordion Menu Using jQuery

Question

I created one accordion menu, issue is I am using .next on li but the div are not slideToggle. and I want this time to make it like accordion menu.

1. Want to open the div when I will click on parent li,
2. When I click on the other li it's div will slide but other li div should be close.

Here is the demo link: http://jsfiddle.net/H4ueq/. Please help me.

Answer 1

You can just use children("div") instead of next(), since it's the child of the clicked li element that you want to slide-toggle. Use slideUp and slideDown instead of toggle, that will produce the accordion functionality.

See here:

http://jsfiddle.net/45Yab/3/

$("ul#accordian>li").click(function() {
    $("#accordian").find("div[class=details]").slideUp("slow");
    $(this).children("div[class=details]").slideDown("slow");
});​

Answer 2

Here's an example of accordion menu: http://jsfiddle.net/x7SE4/2/

Answer 3

One more cool simple jquery accordion which I got from net uses below code:

$(function() {
    $("#accordion > li").click(function() {
        if (false == $(this).next().is(':visible')) {
            $('#accordion > div').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
    $('#accordion > div:eq(0)').show(); //change it to hide() to hide the first tab on load
});

I tweaked a bit of css according to your need. Sorry for late reply. I was in search of such code. Here is the example: http://jsfiddle.net/ravimallya/H4ueq/5/