JSFiddle - React, Tailwind, and code Playground

by hurricaneankit

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 class="checkbox">
            <input type="checkbox" />
        </div>
        <div class="uncheck">
            <input type="checkbox" />
        </div>
    </div>
    <div class="container">
        <div class="blockDiv">
            <div class="inactiveDiv" id="groundDiv"></div>
        </div>
        <div class="checkbox">
            <input type="checkbox" />
        </div>
        <div class="uncheck">
            <input type="checkbox" />
        </div>
    </div>
</div>

CSS

.blockDiv {
    width: 60px;
    height: 60px;
    background: #0000FF;
    border: 2px solid #000;
}
.inactiveDiv {
    background: #0000FF;
}
.activeDiv, #groundDiv {
    width: 45px;
    height: 45px;
    background: #FFAC00;
    margin-left: 8px;
    margin-top: 8px;
}
.uncheck {
    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: -41px;
    display:none;
}
.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;
}
.checkbox input {
    display: none;
}
.uncheck input {
    display: none;
}

JavaScript

jQuery.fn.extend({
    dgStyle: function () {

        $.each($(this), function () {
            var elm = $(this).children().get(0);
            elmType = $(elm).attr("type");
            $(this).data('type', elmType);
            $(this).data('checked', $(elm).attr("checked"));
            $(this).dgClear();
        });
        $(this).mousedown(function () {
            $(this).dgEffect();
        });
        $(this).mouseup(function () {
            $(this).dgHandle();
        });
    },
    dgClear: function () {
        if ($(this).data("checked") == true) {
            $(this).parent().css({
                'background-image': 'url(http://www2.picturepush.com/photo/a/12675320/img/12675320.gif)'
            });
            $(this).fadeOut(2000);
            $(this).parent().parent().find('.uncheck').stop(true, true).delay(4000).show();
            $(this).closest('.container').find('.uncheck').addClass("checkbox").delegate('.uncheck.checkbox','click', function () {
                $('div.uncheck.checkbox').dgStyle();
            });
            $(".blockDiv > div").removeClass("activeDiv");
            $('.blockDiv > div').removeAttr('id');
            $(this).closest('.container').find('.blockDiv .inactiveDiv').addClass("activeDiv");

        }

    },
    dgEffect: function () {
        if ($(this).data("checked") == true) {
            $(this).parent().css({
                'background-image': 'url(http://www2.picturepush.com/photo/a/12675320/img/12675320.gif)'
            });
            $(this).parent().fadeOut(2000);
            $(this).parent().parent().find('.uncheck').stop(true, true).delay(4000).show();
            $(this).closest('.container').find('.uncheck').addClass("checkbox").delegate('.uncheck.checkbox', 'click', function () {
                $('div.uncheck.checkbox').dgStyle();
            });
            $(".blockDiv > div").removeClass("activeDiv");
            $('.blockDiv > div').removeAttr('id');
           ...