jquery in a loop

Question

I have been assisted by the remarkable chaps and chapesses in this site to get this far:

$(document).ready(function () {
    $('#join').click(function () {
        $(this).animate({
            height: "320px"
        }, 500, function () {
            $(this).css('overflow', 'visible');
        });
    })
    $('#joinClose').click(function () {
        $('#join').animate({
            height: "40px"
        }, 500, function () {
            $(this).css('overflow', 'hidden');
        });
    });
});

My div grows from it's static height of 40px, to 320 upon click and sets overflow to visible - lovely. however I have added a button to revert back. It sort of works, but as soon as it gets to it's normal size, it grows again! I am pretty new to coding - do I need a stop somewhere?!?!?!

thanks guys.

Answer 1

If joinClose is a child of join, you need to stopPropagation on joinClose to prevent it from propagating to join.

$('#joinClose').click(function(e) {
    e.stopPropagation();
    ...