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;
}