CODEWITHSUNDEEP
jquery
Ray
Ray

Reputation: 171

Hide/show DIVs one at a time, despite having the same class

How could I hide/show DIVs that have the same class one at a time?

An example here: http://jsfiddle.net/hkP7N/1/

When clicking "Hide content 1" or "Hide content 2", the content in both DIVs disappears. I'd need only the appropriate content to be affected.

$(document).ready(function() {
   $('.hide-button').click( function() {
    $('.content').toggle();
   });

});

Upvotes: 0

Views: 283

Answers (3)

Richard
Richard

Reputation: 4415

Have a look at this: http://jsfiddle.net/hkP7N/2/

Using next you can target the next element

Or like this: http://jsfiddle.net/hkP7N/3/

You can use slideToggle as well, gives a nice effect: http://jsfiddle.net/hkP7N/8/

Upvotes: 5

Alex
Alex

Reputation: 2146

$('.hide-button').click( function() {
    $(this).parent().find('.content').toggle();
});

Demo here: http://jsfiddle.net/5LZeC/

Upvotes: 4

Alex
Alex

Reputation: 35399

$('.hide-button').click( function() {
    $(this).parent().find('.content').toggle();
});

Here it is working with your example.

Upvotes: 1

Related Questions