JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="container">
    <div class="box b1"><p>test</p></div>
    <div class="box b2"></div>
    <div class="box b3"></div>
</div>

CSS

#container{ overflow: hidden; border: 1px solid #333 }

.box { overflow: visible; float: left; width: 200px; height: 100px }

.b1 { background: #aaa }
.b2 { background: #bbb }
.b3 { background: #ccc }

JavaScript

var trigger = 'click'; // click, dblclick, mouseover
var speed = 500;
var easing = 'swing'
var boxWidth = 50;
var boxHeight = 100;
var expandedWidth = 200;
var calcWidth = ($('.box').length - 1) * boxWidth + expandedWidth ;

$('#container').css({ width : calcWidth, height : boxHeight });
$('.box').css({ width : boxWidth });

// Makes one box opened by default
$('.box:first-child').addClass('opened').width(expandedWidth);

$('.box').bind(trigger , function() {
    if ( ! $(this).hasClass('opened') ) {
        $('.opened').removeClass('opened').animate({ width : boxWidth }, { queue : false, duration : speed, easing : easing });
        $(this).addClass('opened').animate({ width : expandedWidth }, { queue: false, duration : speed, easing : easing });
    }
});