Question

I’m trying to make an ‘accordion’ effect using jQuery. I’ve managed to get it working only when my ‘h5’ is clicked all divs open when it should ONLY be the next div.

$('.accordion h5').click(function() {
      $('.accordion h5').next().slideToggle('slow', function() {
        // Animation complete.
      });
});

I’ve made a fiddle so you can see what I mean: http://jsfiddle.net/GnAhs/1/

Answer 1

Inside the click function you have this:

$('.accordion h5').next().slideToggle('slow', function() { ...

$( '.accordion h5' ) matches every h5 inside the .accordion div, so every one of them is toggled. Change the selector to this so that it affects only the clicked element.

$('.accordion h5').click(function() {
      $( this ).next().slideToggle('slow', function() {
        // Animation complete.
      });
});