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.

check out www.jsfiddle.net. It's a really handy tool to use here in order to demonstrate what you're trying to do. — SomeKittens
– SomeKittens, Commented May 23, 2012 at 19:34
This happens because the .click listener of the #join element is triggered for some reason. And you forgot a ";" at line 6 ;) — Stefan Fandler
– Stefan Fandler, Commented May 23, 2012 at 19:35
Pete, is the #joinClose inside of the #join div? If so that could be part of the problem. You should post your html here as well (or in a JSFiddle). — zachzurn
– zachzurn, Commented May 23, 2012 at 19:35

user400654 · Accepted Answer · 2012-05-23 19:36:01Z

4

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();
    ...

answered May 23, 2012 at 19:36

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery in a loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related