Home/ Questions/Q 9178613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T17:35:38+00:00

Problem I’m trying to toggle between two functions when a button is clicked using

  • 0

Problem
I’m trying to toggle between two functions when a button is clicked using jQuery’s .toggle() method, but the button itself goes away as soon as the DOM is ready.

Code

$(document).ready(function() {

    $("#panel").css({"height": "0%", "bottom": "0"});

/*
    var already_clicked = false;
    $("button").on("click", function() {
        if (already_clicked) {
            $("#panel").animate({"height": "0%"}, 500);
            already_clicked = false;
        } else {
            $("#panel").animate({"height": "100%"}, 500);
            already_clicked = true;
        }
    });
*/

    $("button").toggle(function() {
        $("#panel").animate({"height": "100%"}, 500);
    }, function() {
        $("#panel").animate({"height": "0%"}, 500);
    });

});

Markup

<body>
    <div id="panel"></div>
    <button>Click me</button>
</body>

Note: The solution in the comment block works as intended, but I’m not sure why .toggle() doesn’t works.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Im not to use if this is what you want but .slideToggle: 

    $("button").click(function() {
    $("#panel").slideToggle(500);
});

    could be what you are asking?

    • 0