Search code examples
javascriptjquerycssclicktoggleclass

Jquery click function does not activate toggleClass

AIM: I plan on having multiple buttons. Each button will appear one after the other and on clicking the button it will activate a css class with an animation inside it

PROBLEM: Initially, on clicking the first button this works. However the second button requires a double click before toggling the css class.

http://jsfiddle.net/grfLdyqw/

   $("#bt,#bt2").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt").hide();
        $("#bt2").show();
   });

On the back of some research, I found that a solution to this was to create a separate click function in jquery for each button.

NEW PROBLEM: This now allows the 2nd button to be activated on one click but now the toggleClass does not fire.

http://jsfiddle.net/afj98q8n/

    $("#bt").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt").hide();
        $("#bt2").show();
    });

    $("#bt2").click(function () {
        $(".box1").toggleClass("box1-change");

        $("#bt2").hide();
        $("#bt3").show();
    });

As a novice, I am now uncertain as to what to try next. Hopefully someone can advise me on a solution to this issue?

Further down the line, I plan to activate/toggle an animation on the 'buttons' using a similar method before they disappear which might complicate this further?

Thanks.

SOLVED: http://jsfiddle.net/grfLdyqw/7/

Solution

  • After you click the first button the animation class is added to your div, the first click on the second button will remove the class from the div(toggle adds a class if it's not present and removes it if it's present), so that's why you always need to click it twice

    This code will automatically remove the class after the 1.5 seconds need for the animation to finish

    $(document).ready(function () {
    $("#bt").show();
    $("#bt2").hide();

    $("#bt,#bt2").click(function () {
        $(".box1").toggleClass("box1-change");
        setTimeout(function () {
            $(".box1").toggleClass("box1-change");
        }, 1500);

        $("#bt").hide();
        $("#bt2").show();
    });
});

    The working jsfiddle here http://jsfiddle.net/grfLdyqw/4/