jQuery Expand/Collapse with header

Question

I have tried using the accordion plugin, but it does not work, and I know there is a simpler solution using pure jQuery.

In essence, I would like it so that when you click a <h2> with the class="expand" , it should 'expand' the next div with class="collapse" . All the divs should be collapsed by default.

Any help would be much appreciated, thanks in advance!

For testing purposes see this jsFiddle demo.

Answer 1

This is simple, just use the below

$('.expand').click(function() {
  $(this).next('.collapse').slideToggle(); // or use .toggle() for no animation
});

Fiddle: http://jsfiddle.net/garreh/WQYc7/2/

---

To be collapsed by default just add the below css:

.collapse {
    display: none;
}

Answer 2

jsFiddle demo

$('h2.expand').click(function(){
 var co = $('.collapse')
 var el = $(this).next(co);   
 var doit =  el.is(':hidden') ? ( co.slideUp(), el.slideDown() ) : co.slideUp() ;
});

It hides all opened elements before collapsing the closed one.
And it toggles the open state if the element is opened.

Answer 3

Use jQuery, I've updated your Fiddle.

HTML :

<div id="accordion">
<h2 class="toggle">Click to expand and collapse</h2>

<div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>

<h2 class="toggle">Click to expand and collapse 2</h2>
<div class="pane"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
</div>

​Javascript :

<script>
$(document).ready(function() {
  $('#accordion h2').click(function() {
    var $nextDiv = $(this).next();
    var $visibleSiblings = $nextDiv.siblings('div:visible');

    $(this).toggleClass('current').siblings('h2').removeClass('current');
    if ($visibleSiblings.length ) {
      $visibleSiblings.slideUp('fast', function() {
      $nextDiv.slideToggle('fast');
      });
    } else {
       $nextDiv.slideToggle('fast');
    }
  });
});​
</script>

CSS:

.toggle { 
    background: gray;
    padding: 5px;
    cursor: pointer;
}
.pane { display: none; }
​.current { background: green }

Answer 4

I have just wrote a plug-in that does exactly that.

See http://redhotsly.github.com/simple-expand/