Question

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.

Answer 1

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/