JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<div class="container">
    <div class="column col1">Column</div>
    <div class="column col2">Column</div>
    <div class="column col3">Column</div>
    <div class="column col4">Column</div>
</div>

CSS

.container  {margin:0 auto; background:#990; height:200px; width:400px;}
.column     {color:#fff; float:left; cursor:pointer; width:100px; height:100%;}
.col1       {background:#000;}
.col2       {background:#333;}
.col3       {background:#666;}
.col4       {background:#999;}

JavaScript

$(function(){
    $('.column').on('click', function(){
        // If the selected column is expanded, collapse it.
        if($(this).hasClass('active')){
            $(this).animate({
                width: 100
            }).removeClass('active');
            $('.container').animate({
                width: 400
            });
        } else {
            // Reset any expanded column.
            $('.column.active').animate({
                width: 100
            }).removeClass('active');
            
            // Expand this column and set the state class.
            $(this).animate({
                width: 200
            }).addClass('active');
            
            // Expand the container.
            $('.container').animate({
                width: 500
            });
        }
    });
});