CODEWITHSUNDEEP
javascriptjqueryhtmlcssslidetoggle
Anthosiast
Anthosiast

Reputation: 556

jquery Slide Toggle doesn't work with each div

I have a problem here HERE. I don't know why it doesn't work. Let's look the following code to understand it better.

HTML

<div class="click">List 1</div>
<div class="information">Info 1</div>

<div class="click">List 2</div>
<div class="information">Info 2</div>

CSS

.information {
    display:none; 
}

JS

$('.click').click(function() {
    $('.information').slideToggle('slow');
});

I tried one by one it doesn't work at all. Can you help me fix it?

Thanks

Upvotes: 1

Views: 1165

Answers (2)

PeterKA
PeterKA

Reputation: 24638

Your selector inside the click callback must be specific to the element that was clicked.

$('.click').click(function() {
    $(this).next('.information').slideToggle('slow');
});

WORKING JS FIDDLE DEMO

Upvotes: 0

dave
dave

Reputation: 64657

Your code does exactly what it should - it runs slideToggle on all .information tags.

If you just want the one right after the clicked item, you can do:

$(this).next('.information').slideToggle('slow');

Upvotes: 3

Related Questions