JSFiddle - React, Tailwind, and code Playground

by Oliver Kelso

HTML

<div>
    <div style="font-family: Calibri;font-size: 44px;float: right;margin-right:10%;">Elevator</div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv"></div>
        </div>
        <div id="check2" class="checkbox">
        </div>
        <div class="uncheck">

        </div>
    </div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv" id="groundDiv"></div>
        </div>
        <div id="check1" class="checkbox">
            
        </div>
        <div class="uncheck">
        </div>
    </div>
</div>

CSS

.blockDiv {
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}
.activeDiv, #groundDiv {
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
    position:relative;
}
.checkbox {
    height: 42px;
    margin-left: 75px;
    padding: 0px 0 0 28px;
    background-image: url("http://www4.picturepush.com/photo/a/12675332/img/12675332.gif");
    background-repeat: no-repeat;
    background-position: 0% 0px;
    margin-top: -40px;
}

.checked {
    background: url('http://www2.picturepush.com/photo/a/12675320/img/12675320.gif') no-repeat;
}

JavaScript

$(document).ready(function () {
    
    $("#check1").click(function () {
        $("#check1").addClass('checked');
        $("#groundDiv").animate({
            "top": "0px"
        }, 1000, function(){
            $("#check1").removeClass('checked');
        });
    });
    
    $("#check2").click(function () {
        $("#check2").addClass('checked');
        $("#groundDiv").animate({
            "top": "-65px"
        }, 1000, function(){
            $("#check2").removeClass('checked');
        });
    });
    
});