JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="boxs panel1"></div>
    <div class="boxs panel2"></div>
    <div class="boxs panel3"></div>
</div>

CSS

.wrapper {
    position: relative;
    overflow: hidden;
    height: 200px;
    width: 600px;
}
.boxs {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    z-index: 0;
}

.panel1 {
    background-color: blue;
    left: 0;
}
.panel2 {
    background-color: red;
    left: 200px;
}
.panel3 {
    background-color: yellow;
    left: 400px;
}

JavaScript

var boxes = $('.boxs'),
    collapse = function (i) {
        $(boxes[i]).css('z-index', 10).on('click', expand);
        boxes.animate({left: '200px'});
    },
    expand = function () {
        var t = $(this);
        $(boxes[0]).animate({left: 0});
        $(boxes[2]).animate({left: '400px'}, function () {
            t.css('z-index', 0);
            t.off('click', expand);
        });
    };
boxes.each(function (i) {
    $(this).on('click', function () {
        collapse(i);
    });
});