jquery how to toggle this specific animation?

Question

So I want to toggle this animation in jQuery but I found it very hard to find a way.

$( "#console" ).animate({height: "20px"});

http://stackoverflow.com/questions/931113/jquery-toggle-animation Should be helpful to you — Pushpendra, May 28 '16 at 09:40
@Pushpendra : `toggle` is deprecated as of JQuery 1.8 and removed in JQuery 1.9 — Pranav C Balan, May 28 '16 at 09:42
toggle a class instead, handling animation in CSS. EDIT: as you seem to use jQuery UI, this would be easier using [toggleClass()](http://api.jqueryui.com/toggleClass/) and passing relevant parameters to enable animation — A. Wolff, May 28 '16 at 09:46

score 1 · Accepted Answer · answered May 28 '16 at 11:20

You can set height of element in variable and use it to animate. Also you need to save toggle state to having animation without bug.

var firstHeight = $("div").height();
$("div").click(function(){
    $(this).stop();
    if (!$(this).data("animateToggle"))
        $("div").data("animateToggle", 1).animate({height: "200px"});
    else       
        $("div").removeData("animateToggle").animate({height: firstHeight});
});

div {
    width: 100px;
    height: 100px;
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

jquery how to toggle this specific animation?

1 Answers1