JSFiddle - React, Tailwind, and code Playground

by mehmetatas

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="container">
    <div class="item">
        <div class="minimise">
            <h1>Toddler</h1>
            <p>I can't yet fill large Isotope items :(</p>
        </div>
        <div class="maximise">
            <h1>Adult</h1>
            <p>Much later, having received too many clicks, I went for a good curry ...
                and grew up at last :)</p>
            <p>I'm a real Isotope item now!</p>
        </div>
    </div>
    
    <div class="item">
        <div class="minimise">
            <h1>Toddler</h1>
            <p>I'm still too small :(</p>
        </div>
        <div class="maximise">
            <h1>Adult</h1>
            <p>Much later, having received too many clicks, I went for a good curry ...
                and grew up at last :)</p>
            <p>I'm a real Isotope item now!</p>
        </div>
    </div>
    
    <div class="item">
        <div class="minimise">
            <h1>Toddler</h1>
            <p>I feel so tiny!</p>
        </div>
        <div class="maximise">
            <h1>Adult</h1>
            <p>Much later, having received too many clicks, I went for a good curry ...
                and grew up at last :)</p>
            <p>I'm a real Isotope item now!</p>
        </div>
    </div>
    
    <div class="item">
        <div class="minimise">
            <h1>Toddler</h1>
            <p>I should go out and have more bananas!</p>
        </div>
        <div class="maximise">
            <h1>Adult</h1>
            <p>Much later, having received too many clicks, I went for a good curry ...
                and grew up at last :)</p>
            <p>I'm a real Isotope item now!</p>
        </div>
    </div>
    
    <div class="item">
        <div class="minimise">
            <h1>Toddler</h1>
            <p>Why always me?</p>
        </div>
        <div class="maximise">
            <h1>Adult</h1>
            <p>Much later, having received too many...

CSS

.item {
  float: left;
  margin: 5px;
  color: white;
}

.minimise {
  height: 100px;
  width: 100px;
  background: gray;
}

.maximise {
  display: none;
  height: 200px;
  width: 100px;
  background: teal;
}

.minimise h1 {
    font-size: 0.9em;
    font-weight: 700;
    padding-top: 3px;
    margin-left: 3px;
    }

.maximise h1 {
    font-size: 1.3em;
    font-weight: 700;
    padding-top: 6px;
    margin-left: 6px;
    }

.minimise p {
    font-size: 0.8em;
    padding-top: 3px;
    margin-left: 3px;
    }

.maximise p {
    font-size: 1.0em;
    padding-top: 6px;
    margin-left: 6px;
    }

.maximise p + p {
    font-size: 1.1em;
    font-style: italic;
    padding-top: 6px;
    margin-left: 6px;
    }

/* Start: Recommended Isotope styles */

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

/* End: Recommended Isotope styles */

JavaScript

$(function () {

    var $container = $('#container');
    $items = $('.item');

    $container.isotope({
        itemSelector: '.item',
        masonry: {
            columnWidth: 110
        }
    });

    $('.item').click(function () {

        if ($(this).hasClass('selected')) {
            $(this).removeClass('selected');
            $(this).children('.maximise').hide();
            $(this).children('.minimise').show();
        } else {
            $(this).addClass('selected');
            $(this).children('.minimise').hide();
            $(this).children('.maximise').show();
        }

        /*$container.isotope('shuffle');*/
        $container.isotope('reLayout');
    });

});