CODEWITHSUNDEEP
javascriptjqueryaccordion
Liam
Liam

Reputation: 9855

Target next div only with jQuery

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/

Upvotes: 1

Views: 2798

Answers (5)

Murtaza
Murtaza

Reputation: 3065

You just need to change your selector for SlideToggle

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

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

Upvotes: 0

stian.net
stian.net

Reputation: 3963

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

Upvotes: 0

jlledom
jlledom

Reputation: 650

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

Upvotes: 0

js-coder
js-coder

Reputation: 8346

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/

Upvotes: 0

JJJ
JJJ

Reputation: 33143

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

Upvotes: 1

Related Questions