Mobile menu toggle issue (onclick only works on outer container, not button)

Question

I have the following code: http://jsfiddle.net/GtC6x/10/ (animated dynamic height)

Now, you can click on both the button and the whole red area to toggle. I only want the purple area to be the one that toggles, with this markup structure.

$('.nav-container').on('click', function() {

Should be

$('.nav-toggle').on('click', function() {

But then it breaks. What do I need to change in the code? As a js newbie I've been staring at this code for a while but have failed to see where/why the toggle has to sit on the outer container to work.

$('.nav-container').on('click', function() {
    slide($('.nav-wrap .nav', this));
});

function slide(content) {
    var wrapper = content.parent();
    var contentHeight = content.outerHeight(true);
    var wrapperHeight = wrapper.height();

    wrapper.toggleClass('expand');
    if (wrapper.hasClass('expand')) {
    setTimeout(function() {
        wrapper.addClass('transition').css('height', contentHeight);
    }, 10);
}
else {
    setTimeout(function() {
        wrapper.css('height', wrapperHeight);
        setTimeout(function() {
        wrapper.addClass('transition').css('height', 0);
        }, 10);
    }, 10);
}

wrapper.one('transitionEnd webkitTransitionEnd transitionend oTransitionEnd msTransitionEnd', function() {
    if(wrapper.hasClass('open')) {
        wrapper.removeClass('transition').css('height', 'auto');
    }
});
}

Answer 1

When changing your function to .nav-toggle your this was no longer targeting the container instead it was your nav-toggle to get the same functionality we needed to get the parent of your nav-toggle which is the nav-container .

$('.nav-toggle').on('click', function() {
    slide($('.nav-wrap .nav', $(this).parent()));
});

Here is the fiddle

http://jsfiddle.net/GtC6x/12/