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.

/

** 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.

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/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.

• javascript
• jquery
• toggle

4 Answers 4

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/LHguJ/11/

You could use nextAll() like this:

jsFiddle

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

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/LHguJ/12/

​Or with siblings:

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

​http://jsfiddle/LHguJ/13/

jQuery

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

http://jsfiddle/iambriansreed/JLj2X/