JSFiddle - React, Tailwind, and code Playground

by taylorRichie

HTML

<div id="container">
    <!--Row 1 -->
    <div class="tile" id="bio"> 1:1</div>
    <div class="tile"> 1:2</div>
    <div class="tile"> 1:3</div>
    <div class="tile">1:4</div>
    <!--Row 2 -->
    <div class="tile">2:1</div>
    <div class="tile">2:2</div>
    <div class="tile">2:3</div>
    <div class="tile">2:4</div>
</div><!-- EO Container -->

CSS

#container{
    border:1px solid red;
    min-height:200px;
    width:400px;
    overflow:hidden;
    position:relative;
}

.tile{
    width: 90px;
    height: 90px;
    background-color: red;
    float:left;
    margin:5px;
    z-index:5;

}

#bio{
    background-color:#CCC;

JavaScript

$('#bio').on('click', function(){
    var t = $(this),
        speed = 900;
    
    if( t.is(':animated') ) return;
    
    if( !t.hasClass('full') ) {
        t.data('size', { width : t.width(), height : t.height() });
        
        t.siblings().fadeOut('slow', function(){
            t.animate({
                width : t.parent().innerWidth() - 10,
                height : t.parent().innerHeight() - 10
            }, speed, function(){ t.addClass('full'); });
        });
    } else {
        t.animate({
            width : t.data('size').width,
            height : t.data('size').height
        }, speed, function(){
            t.removeClass('full')
            .siblings().fadeIn( speed );
        });
        
    }
});