jQuery accordion

Question

Our html:

<ul class="accordion">
 <li>
  <h2 class="a-head">head 1</h2>
  <div class="a-body">body 1</div>
 </li>
 <li>
  <h2 class="a-head">head 2</h2>
  <div class="a-body">body 2</div>
 </li>
 <li>
  <h2 class="a-head">head 3</h2>
  <div class="a-body">body 3</div>
 </li>
</ul>

JS:

$(".accordion .a-head").click(function()
{
    $(this).css({backgroundColor:"#ccc"}).next(".a-body").slideToggle().siblings(".a-body").slideUp();
    $(this).siblings().css({backgroundColor:"#fff"});
});

This accordion begins to work If I remove <li></li>. How do I make it work with current code?

Actually problem is in .siblings().

Thanks.

Answer 1

I can offer you this:

jQuery:

$('li h2.a-head').click(
    function(){
        $(this).closest('ul').find('div.a-body').slideUp(400);
        $(this).closest('li').find('div.a-body').slideToggle(400);
    });

css:

li div.a-body {
    display: none;
}

JS Fiddle demo.

Answer 2

Is it what you want? : http://jsfiddle.net/v2Z5L/1/ It could be simpler if you'd put a container for your "a-body" elements. For now, each of them slide, one by one.