JSFiddle - React, Tailwind, and code Playground

by vansimke

HTML

<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
<div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>

<div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>


    </div>

JavaScript

$(document).ready(function() {
    $("#arrow").hover(

    function() {
        $("#inner").stop().animate({
            marginRight: "0px",
            opacity: "1px",
            height: "100px"
        }, 500);
    }, function() {});
    $('#arrow').mouseleave(

    function() {
        setTimeout(function() {
            $("#inner").stop().animate({
                marginRight: "-100px",
                opacity: "1px",
                height: "100px"
            }, 500);
        }, 1000)
    });
});


$("#arrow").click(function(e) {
    $("#inner").stop().animate({
        marginRight: "-100px",
        opacity: "1px",
        height: "100px"
    }, 500);
});