Selecting parent div and not every div with the same name with jQuery

Question

my problem is, when i click on a div with the class "trigger" every div "group" opens, but only the parent div should open, how can i do this?

Code

// global variables
var nav           = $('.group'),
    navHeight     = nav.height()+15,
    items         = $('.group .item .trigger'),
    itemsSub      = items.next('.toggle_container'),
    itemsSubOpen  = false,
    speed         = 400;
// global functions
var navOpen = function (thisSubmenu) {
    itemsSubOpen = true;
    // get height
    thisSubmenu.css('height', 'auto');
    var thisHeight = thisSubmenu.height();
    thisSubmenu
        .css('height', '0')
        .animate({height: thisHeight }, speed)
        .addClass('open');

    nav.animate({height: thisHeight + navHeight }, speed);
};
var navClose = function () {
    itemsSubOpen = false;
    items.next('.open')
        .animate({height: 0}, speed)
        .removeClass('open');
    nav.animate({height: navHeight-15 }, speed);
};
// prepare css
itemsSub.css('display', 'block');
itemsSub.css('height', '0');
// click event
items.click(function(event) {
    // set local variables
    var thisItem = $(this),
        thisSubmenu = thisItem.next('.toggle_container');
    // conditional click event handling
    if ( itemsSubOpen  ) {
        if ( thisSubmenu.hasClass('open') ) {
            // only close
            navClose();
        } else {
            // close old, than open new
            navClose();
            setTimeout(function() {
                navOpen(thisSubmenu);
            }, speed);
        }
    } else {
        // only open
        navOpen(thisSubmenu);
    }
    // prevent default
    event.preventDefault();
});

I have this fiddle here as an example: http://jsfiddle.net/kfcgg/15/ Maybe one of you can help me with that problem.

Thanks

Answer 1

The right way to do this is you refer only to the parent div!

$(this).closest('.group')

will refer to the parent 'group' class only. I hope this is usefull!