CODEWITHSUNDEEP
jquerybuttonfind
ttmt
ttmt

Reputation: 4984

jQuery slideToggle next container with class name

I have a jsfiddle here - http://jsfiddle.net/bmdpamhy/

It's three btns with content div's below. The button and content containers have class names.

The content div's are hidden.

I want to open just the content div below the button clicked.

How do I open just the div below the buton clicked.

        /* This will open all content divs
        $(function(){
            $('.open').click(function(){
                $('.content').slideToggle();
            });
        })
        */


        // I want to open just the content below the button clicked
        $(function(){
            $('.open').click(function(){
                $(this).next('.content').slideToggle();
            });
        })

Upvotes: 0

Views: 1239

Answers (2)

Holybreath
Holybreath

Reputation: 413

Here is some modifications in case needed.

http://jsfiddle.net/bmdpamhy/1/

This will give your slide contents a feel of 'show-one-at-the-time'. Take a look.

$(function(){
    $('.open').click(function(e){
        e.stopPropagation();

               $(this).parents('.wrap').find('.content.opened').slideToggle().toggleClass('opened'); 
$(this).parent().next('.content').slideToggle().toggleClass('opened');

    });
})

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You have incorrect selector. .content is sibling of clicked buttons parent.Use:

$('.open').click(function(){
    $(this).parent().next('.content').slideToggle();
});

Working Demo

Upvotes: 2

Related Questions