JQuery баян

Question

Наш 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"});
});

Этот аккордеон начинает работать, если я уберу <li></li>. Как мне заставить его работать с текущим кодом?

На самом деле проблема в .siblings().

Спасибо.

Answer 1

Я могу предложить вам это:

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

Это то, что вы хотите?: http://jsfiddle.net/v2Z5L/1/ Было бы проще, если бы вы поместили контейнер для элементов "a-body".Пока каждый из них скользит по очереди.