CODEWITHSUNDEEP
javascriptjquerytoggle
Danny Englander
Danny Englander

Reputation: 2044

JQuery toggle only related div closest to it

I have sets of similar divs that I am toggleing with some basic code like this:

 $(".field-group-format-toggler-abstract").click(function()
            {
        $(".field-group-format-wrapper").toggle();
   });

The issue I am having is that whenever I trigger the "+", it toggles all other divs with the same class when I only want to toggle the related div closest to it .field-group-format-wrapper . I tried .next and .closest but that just seems to lock things up and then it does not work yet I am getting no syntax error e.g.

$(".field-group-format-toggler-abstract").click(function()
                {
            $(".field-group-format-wrapper").closest().toggle();
       });

I created a working version here but if you add in .closest as I have above, it does not work anymore.

http://jsfiddle.net/LHguJ/5/

** Note, I only want to show / hide what's in field-group-format-wrapper and nothing else so the "Title" still needs to show whether expanded or not.

Upvotes: 2

Views: 6620

Answers (4)

saluce
saluce

Reputation: 13360

Try using $(this).parent().find(".field-group-format-wrapper")

$(".field-group-format-toggler-abstract").click(function() {
    $(this).parent().find(".field-group-format-wrapper").toggle();
});

http://jsfiddle.net/LHguJ/12/

​Or with siblings:

$(".field-group-format-toggler-abstract").click(function() {
    $(this).siblings(".field-group-format-wrapper").toggle();
});

​http://jsfiddle.net/LHguJ/13/

Upvotes: 1

wirey00
wirey00

Reputation: 33661

What you want is siblings(). And use this to refer to the clicked element. You were using closest which looks for the closest() 'parent'. 

$(".field-group-format-toggler-abstract").click(function() {
    $(this).siblings(".field-group-format-wrapper").toggle();
});​

http://jsfiddle.net/LHguJ/11/

Upvotes: 5

Gabe
Gabe

Reputation: 50493

You could use nextAll() like this:

jsFiddle

$(".field-group-format-toggler-abstract").click(function(){
    $(this).nextAll(".field-group-format-wrapper").toggle();
});

Upvotes: 1

iambriansreed
iambriansreed

Reputation: 22241

jQuery

$(".field-group-format-toggler-abstract").click(function(){
    $(this).siblings(".field-group-format-wrapper").toggle();
    $(this).html( $(this).html() == '+' ? '–' : '+');
});​

http://jsfiddle.net/iambriansreed/JLj2X/

Upvotes: 0

Related Questions