JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.ba-hashchange.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/isotope-center.js"></script>
<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<div id="main-grid">
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-image"></div>
        <div class="grid-block-titles">
            <div class="category">Brand</div>
            <div class="title">TEST</div>
            <div class="date">12 July</div>
        </div>
        <div class="grid-block-text"><p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</p> <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text</p>
        </div>
    </div>
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-text">
            <p>this is text</p>
        </div>
    </div>
    <div class="grid-block">
        <div class="read-more">Read More</div>
        <div class="read-less">Read Less</div>
        <div class="grid-block-text"><p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text...

CSS

#main-grid {
    top: 70px;
    width: auto;
    position: absolute;
    margin: 0 auto;
    padding-bottom: 70px;
}
.grid-block {
    width: 200px;
    height: 300px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid black;
}

.grid-block-image {
    position: absolute;
    width: 100%; height: 100px;
    background-color: orange;
}

.grid-block-titles {
    position: absolute;
    width: 100%; height: auto;
    top: 110px;
    border-top: 1px solid black;
    padding-top: 10px;
}

.grid-block-long {
    width: 200px;
    /*height: 630px;*/
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 30px;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid black;
}
.grid-block-text {
    position: relative;
    padding-top: 135px;
}
.read-more, .read-less {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 5px;
    cursor: pointer;
}
.read-less {
    display: none;
}

.hide {
    display: none;
}

.show {
    display: inline;
}

/*
ISOTOPE CONTENT ------------------
*/
 .isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    z-index: 1;
}
.isotope, .isotope .isotope-item {
    /* change duration value to whatever you like */
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    -ms-transition-property: height, width;
    -o-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    -ms-transition-property: -ms-transform, opacity;
    -o-transition-property: -o-transform, opacity;
   ...

JavaScript

$(document).ready(function () {
    var $elem = $('.grid-block-text p:first-child'); // The element or elements with the text to hide
        var $limit = 50; // The number of characters to show
        var $str = $elem.html(); // Getting the text
        var $strtemp = $str.substr(0, $limit); // Get the visible part of the string
        $str = $strtemp + '<span class="hide">' + $str.substr($limit, $str.length) + '</span>'; // Recompose the string with the span tag wrapped around the hidden part of it
        $elem.html($str); // Write the string to the DOM 
});




$(document).ready(function () {
    var $container = $('#main-grid');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block, .grid-block-long',
            animationEngine: 'best-available',
            masonry: {
                columnWidth: 5
            }
        });
    });

 $('.grid-block-text p').hide().filter(":first-child").show();
    
    $('.read-more').click(function () {
        var $this = $(this),
            $parent = $this.parent('.grid-block');
        $this.hide();
        $this.nextAll('.grid-block-text')
            .children('p').fadeIn('slow');
        $this.nextAll('.grid-block-text')
            .children().children('.hide').removeClass('hide').addClass('show');
        $this.siblings('.read-less').fadeIn('slow');
        $parent.css('height','auto');
        var newHeight = $parent.height();
        newHeight = (Math.floor((newHeight+29)/330)+1)*330-29;
        $parent
            .css('height',newHeight)
            .removeClass('grid-block')
            .addClass('grid-block-long');
        //$('#main-grid').isotope('reLayout');
        $container.isotope('reLayout');
    });

    $('.read-less').click(function () {
        var $this = $(this);
        $this.hide();
        $this.nextAll('.grid-block-text')
            .children("p:not(:first-child)").fadeOut('fast');
        $this.nextAll('.grid-block-text')
      ...