JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/2.1.05/jquery.masonry.min.js"></script>
Click on a box
<br>

<div class="container">
    <div class="wrap" id="grid">
        
        <div class="box col3" data-size="380,380">
            <h5>1</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
            <div class="expandable">
                <img src="http://i50.tinypic.com/2469we1.jpg" /><img src="http://i50.tinypic.com/2469we1.jpg" />
                <br><br>
                Sit amet mi ullamcorper vehicula.
                <br>
                <div style="float:right; width: 150px;">Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci.</div>
            </div>
        </div>
        
        
        
        <div class="box col1" data-size="180,380">
            <h5>2</h5>
            <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris. </p>
        </div>
        
        <div class="box col2">
            <h5>3</h5>
            <p>Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit.</p>
        </div>
        
        <div class="box col1" data-size="280,280">
            <h5>4</h5>
            <p>Fusce accumsan mollis eros. Pellentesque a diam sit amet mi ullamcorper vehicula. Ut eget sem risus, et posuere velit.  Aenean ac mauris non ligula.    </p>
        </div>
        
        <div class="box col1">
            <h5>5</h5>
            <p>Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus.</p>
        </div>
        
        <div class="box col1">
            <h5>6</h5>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
       ...

CSS

.container { width: 520px; }
.box { color: #222 }
.wrap {
    background: #FFF;
    border: 0px solid #456;
    padding: 10px;
    margin-bottom: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 11px;
    float: left;
    overflow: hidden;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }

.box h5 {
    color:#FFFFFF;
    float:right;
    font-size:25px;
    font-weight:bold;
    padding: 3px;
    margin: 0 2px;
}

.expandable {
    display: none;
}

JavaScript

$(document).ready(function(){

 var defaultSize = [180, 180]; // expanded box size: width , height

    $('#grid').masonry({
        singleMode: false,
        columnWidth: 100,
        resizeable: true,
        itemSelector: '.box',
        animate: true
    });
    
    $('.box').click(function(){
        if ($(this).is('.expanded')){
            restoreBoxes();
        } else {
              var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
            $(this)
                // save original box size
                .data('size', [ $(this).width(), $(this).height() ])
                .animate({
                    width: size[0],
                    height: size[1]
                }, function(){
                    // show hidden content when box has expanded completely
                    $(this).find('.expandable').show('slow');
                    $(this).find('.hideable').hide('slow');
                    $('#grid').masonry();
                });
            restoreBoxes();
            $(this).addClass('expanded');
        }
        
        function restoreBoxes(){
            var len = $('.expanded').length - 1;
            $('.expanded').each(function(i){
                var box = $(this).data('size');
                $(this).find('.expandable').hide('slow');
                $(this).find('.hideable').show('slow');
                $(this).animate({
                        width: ( box[0] || 100 ),
                        height: ( box[1] || 'auto' )
                    }, function(){
                        if (i >= len) {
                            $('#grid').masonry();
                        }
                    })
                    .removeClass('expanded');
            })
         }
    });
});