Search code examples
javascriptjquerycssslidetoggle

Restricting jQuery slideToggle from working on more than one element

I have a block of repeating images, each with a caption underneath. I am using slideToggle to show and hide the caption for each image when the image is clicked. 

 $('.imageholder').click(function() {
 $(this).next().slideToggle("fast");

 });

A working fiddle showing my method is here.

This works as it should but I want to prevent multiple captions from being visible simultaneously. As a user clicks an image, any open captions should close. In my example, you will see it is possible to open all captions. This is what I want to prevent.

Would appreciate a nudge in the right direction. Thanks.

Solution

  • Just do something like this?

    $('.imageholder').click(function() {
     $('.description').slideUp();
     $(this).next().slideToggle("fast");
});