JSFiddle - React, Tailwind, and code Playground

by Jpec07

HTML

Clicking the links mid-animation should stop the animation, and start the next. But a problem arises when you try to expand the Div again: it returns to the height at which the animation was stopped, leaving a significant portion of content hidden outside of view.

<div id="clicker"><a href="#">Click me! :D</a></div>
<div id="clickee" style="display:none;">This Div's height is defined by its content. There is no other definition for this div's height. Animation should allow it to go all the way down to the end of the world, but I am having no such luck. What do?</div><br />

CSS

div{
    padding:.5em;
    margin:1em;
    border:1px #000;
    background:#f00;
    opacity:0.7;
    width:200px;
    color:#cff;
    text-decoration:none;
}
a   {
    color:inherit;
    text-decoration:inherit;
}

JavaScript

$(document).ready(function() {
    $("#clicker a").click(function() {
        if ($("#clickee").hasClass('clicked')) {
            $("#clickee")
                .removeClass('clicked')
                .stop(true, false)
                .slideUp("slow");
        } else {
            $("#clickee")
                .addClass('clicked')
                .stop(true, false)
                .slideDown("slow");
        }
    });
});