How to toggle dynamically created div 's on the basis of class and name attributes, modified?

Question

Following is my reference Code:

$('#main_div').on('click','.gclass', function(){        
    $(this).css('color','#0088cc'); 
    if($(this).next().hasClass('gclass2') || $(this).next().next().hasClass('gclass3')){
        console.log('1st child or 2nd child');          
        $(this).parent().find('.gclass2,.gclass3').slideToggle();
    }   
    return false;
});

I have created two divs dynamically who are having same class '.gclass'. When I click on '.gclass' then divs with '.gclass2 and .gclass3' are toggle.

When I click on one div of class .gclass then other div having .gclass is also getting toggled, which I dont want to.

Any hint please.

For CSS I tried :

 $(".gclass").not(this).css("color", "#6e6e6e");        

But for slideToggle() what can be done?

Answer 1

For slideToggle() you can write custom filter that will filter out your element:

var that = this;
$(this).parent().find('.gclass2,.gclass3').filter(function() {
    return $(this).prev()[0] === that || $(this).prev().prev()[0] === that
}).slideToggle();

Working example see here: http://jsbin.com/IjaboNE/1/edit