Second time clicking div closes and directly opens

Question

I'm working on a menu wich I can expand and collapse. When I click it my code works fine and collapses the div. And if I click again on my open en close div it opens fine also. But The second time doing this procces my div closes and opens directly. Can someone tell what I'm doing wrong..


$( document ).ready(function(e) {

    // Collapse and expand
    $("#collapse").click(
        function() {
            $("#information").fadeOut(200);
            $("#leftColumn").animate({width:"10px"}, 200);
            $("#collapse").html("»");

            $(this).click(function() {
                $("#information").fadeIn(200);
                $("#leftColumn").animate({width:"250px"}, 200);
                $("#collapse").html("«");

            });
        }
    );


});

You bind a new function to the `click()` event. It's not overwriting the first function, so both will be called at the second click. You might have a look at the `toogle()` event. — ConcurrentHashMap, May 28 '13 at 09:57

adeneo · Answer 1 · 2013-05-28T15:59:51.403

1

$(document).ready(function() {
    $("#collapse").on('click', function() {
        var w = parseInt( $("#leftColumn").css('width'),10 ) > 11;
        $("#information").fadeToggle(200);
        $("#leftColumn").stop(true,true).animate({width: w ? 10 : 250}, 200);
        $("#collapse").html(w ? "»" : "«");
    });
});

edited May 28 '13 at 15:59

answered May 28 '13 at 09:57

adeneo

293,187
26
361
361

The only thing which doesn't work is the .html change of the » – Robbert May 28 '13 at 11:11
@Robbert - ooops, fixed that ! – adeneo May 28 '13 at 16:00

score 0 · Answer 2 · answered May 28 '13 at 10:02

You override the first onclick function - that's why you have to handle your expand/collapse a bit different. This variant simply adds and removes a class to decide which animation should be used:

( document ).ready(function(e) {
    // Collapse and expand
    $("#collapse").click(
        function() {
            // default case
            if(!$(this).hasClass('collapsed')) {
                $(this).addClass('collapsed');
                $("#information").fadeOut(200);
                $("#leftColumn").animate({width:"10px"}, 200);
                $("#collapse").html("»");
            } else {
                // and in case it is collapsed...
                $(this).removeClass('collapsed');
                $("#information").fadeIn(200);
                $("#leftColumn").animate({width:"250px"}, 200);
                $("#collapse").html("«");
            }
        }
    );
});

score 0 · Accepted Answer · answered May 28 '13 at 10:02

Try this,

var toggle=0;
$("#collapse").click(function() {
    if(toggle==1){
        $("#information").fadeIn(200);
        $("#leftColumn").animate({width:"250px"}, 200);
        $("#collapse").html("«");
        toggle=0;
    }
    else
    {
        $("#information").fadeOut(200);
        $("#leftColumn").animate({width:"10px"}, 200);
        $("#collapse").html("»");
        toggle=1;
    }
});

Second time clicking div closes and directly opens

3 Answers3