仅使用jQuery定位下一个div

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

Answer 2

You need to make use of this :

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

this inside the callback function of the click event always links to the element has been clicked. So you select the clicked element and then the next element with $(this).next() .

Here's a working demo: http://jsfiddle.net/GnAhs/2/

Answer 3

Just write $(this).next() instead of $('.accordion h5').next() , that matches with all .accordion h5 in the code

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

Answer 4

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

Answer 5

You just need to change your selector for SlideToggle

instead of $('.accordion h5').next().slideToggle()

you need to specify $(this).next().slideToggle()