JSFiddle - React, Tailwind, and code Playground

by Laxmikant Dange

HTML

<div class='outerDiv'>
    <div class='innerDiv'>1</div>
    <div class='innerDiv open'>2</div>
    <div class='innerDiv'>3</div>
    <div class='innerDiv'>4</div>
    <div class='innerDiv'>5</div>
    <div class='innerDiv'>6</div>
    <div class='innerDiv'>7</div>
    <div class='innerDiv'>8</div>
    <div class='innerDiv'>9</div>
    <div class='innerDiv'>10</div>
    <div class='innerDiv'>11</div>
    <div class='innerDiv'>12</div>
    <div class='innerDiv'>13</div>
    <div class='innerDiv'>14</div>
</div>

CSS

.outerDiv {
    width:530px;
    position:absolute;
    
}
.innerDiv {
    margin:2px;
    width:100px;
    height:100px;
    float: left;
    background-color:#F00;
}
.expanded {
    width:205px;
}
.open{
    width:205px;
}

JavaScript

$.each($('.innerDiv'), function (i, elm) {
    var $elm = $(elm)
    if ($elm.position().left == 0 && i!=0)
        $elm.addClass('first');
});

$('.innerDiv').on('click', function (e) {
    $this = $(this);

    $.each($('.shifted'), function (i, elm) {
        var $elm = $(elm);
        $elm.after($elm.prev());
        $elm.removeClass('shifted')
    });

    if ($this.hasClass('first')) {
        $this.addClass('shifted')
        $this.before($this.next());
    }

    $('.open').animate({
        width: 100
    }).removeClass('open');
    
    $this.animate({
        width: 204
    }).addClass('open');
});