jQuery - Toggle between functions on click

Question

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.

is button is inside or outside panel.?

Dipesh Parmar
– Dipesh Parmar

2013-01-24 08:56:49 +00:00
Commented Jan 24, 2013 at 8:56 — Dipesh Parmar
– Dipesh Parmar, Commented Jan 24, 2013 at 8:56
Outside and after the panel.

Rafay
– Rafay

2013-01-24 08:57:21 +00:00
Commented Jan 24, 2013 at 8:57 — Rafay
– Rafay, Commented Jan 24, 2013 at 8:57
paste little html code...

Dipesh Parmar
– Dipesh Parmar

2013-01-24 08:58:01 +00:00
Commented Jan 24, 2013 at 8:58 — Dipesh Parmar
– Dipesh Parmar, Commented Jan 24, 2013 at 8:58
Which jQuery version you use?

IUnknown
– IUnknown

2013-01-24 08:59:39 +00:00
Commented Jan 24, 2013 at 8:59 — IUnknown
– IUnknown, Commented Jan 24, 2013 at 8:59
its working nothing wrong.

Dipesh Parmar
– Dipesh Parmar

2013-01-24 08:59:58 +00:00
Commented Jan 24, 2013 at 8:59 — Dipesh Parmar
– Dipesh Parmar, Commented Jan 24, 2013 at 8:59

voigtan · Accepted Answer · 2013-01-24 08:57:58Z

5

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

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

could be what you are asking?

answered Jan 24, 2013 at 8:57

voigtan

9,0212 gold badges31 silver badges30 bronze badges

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

3 Comments

Rafay Over a year ago

Oh lordy, I didn't know this existed. This is precisely what I'm trying to accomplish. Thanks!

Anujith Over a year ago

$("#panel").stop().slideToggle(500); will do better... See jsfiddle.net/kFdnF

voigtan Over a year ago

@A.V thats what most want, but maybe Rafay want to quere up his slides :)

Alnitak · Accepted Answer · 2013-01-24 09:05:18Z

2

If you are using jQuery 1.9 then .toggle doesn't work like that - the version that takes two functions as arguments was deprecated in 1.8 and removed in 1.9

See http://api.jquery.com/toggle-event/

edited Jan 24, 2013 at 9:05

answered Jan 24, 2013 at 8:58

Alnitak

341k72 gold badges420 silver badges503 bronze badges

3 Comments

Alnitak Over a year ago

@Liam that's where I was looking - the version the OP is trying to use is at api.jquery.com/toggle-event but it's deprecated in 1.8 and removed in 1.9

Rafay Over a year ago

How very irresponsible of me; I should have checked the docs first. Oh well, it was a good function.

Liam Over a year ago

Yeah, just adding to give a little extra info to the OP

Collectives™ on Stack Overflow

jQuery - Toggle between functions on click

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related