JSFiddle - React, Tailwind, and code Playground

by Tushar Jadhav

HTML

<footer>
    <one id="one" data-clicks="true">
        <p unselectable="on"></p>
    </one>
    <two id="two" data-clicks="true">
        <p unselectable="on"></p>
    </two>
    <three-info></three-info>
    <three id="three" data-clicks="true">
        <p unselectable="on"></p>
    </three>
</footer>

CSS

footer {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    height: 115px;
    background-color: #4a4a4a;
    overflow: visible !important;
    -webkit-user-select: none;
    /* Chrome/Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
}
one {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: pink;
    height: 115px;
    margin-left: 0px;
    display: block;
}
one, two, three {
    text-align: center;
    color: white;
    font-family:"Raleway", Arial, Helvetica, Trebuchet MS, Tahoma, sans-serif;
    font-weight: bold;
    font-size: 16px;
    line-height: 115px;
}
one:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
two:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
three:hover {
    background: black;
    margin: 0;
    padding: 0;
    height: 115px;
    float: left;
    transition: all 0.3s ease-out;
    cursor: pointer;
}
two {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: gray;
    height: 115px;
    margin-left: 0px;
    display: block;
}
three {
    margin: 0;
    padding: 0;
    float: left;
    width: 200px;
    background-color: black;
    height: 115px;
    margin-left: 0px;
    display: block;
}

JavaScript

$(document).ready(function () {

    function animateOthers(clickedElement, otherElement) {
        otherElement.animate({
            marginLeft: 0 + 'px'
        }, 100, 'linear');
        clickedElement.animate({
            marginLeft: $(window).width() - 900 + 'px'
        }, 745, 'linear');
    }

    function animate(clicks, first, second, third) {
        var leftMargin = ($(window).width() - 900) + 'px';

        if (clicks) {
            first.animate({
                marginLeft: leftMargin
            }, 745, 'linear');
        } else {
            first.animate({
                marginLeft: 0 + 'px'
            }, 800, 'linear');
        }

        if (second.css('marginLeft') == leftMargin) {
            animateOthers(first, second);
        }
        if (third.css('marginLeft') == leftMargin) {
            animateOthers(first, third);
        }

        first.data("clicks", !clicks);
    }

    var elements = ['one', 'two', 'three'];
    $('#one, #two, #three').on('click', function () {
        var clicks = $(this).data('clicks');

        var clickedElement = $(this).attr('id'),
            otherElements = elements.slice();
        otherElements.splice(elements.indexOf(clickedElement), 1);

        animate(clicks, $(this), $('#' + otherElements[0]), $('#' + otherElements[1]));
    });
});