CODEWITHSUNDEEP
javascriptjqueryaccordionsiblings
James
James

Reputation: 43647

jQuery accordion

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.

Upvotes: 1

Views: 395

Answers (2)

David Thomas
David Thomas

Reputation: 253358

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.

Upvotes: 1

CronosS
CronosS

Reputation: 3159

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.

Upvotes: 1

Related Questions