JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<script src="http://www.nealfletcher.co.uk/js/jquery.imagesloaded.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="http://www.nealfletcher.co.uk/js/gutterwidth.js"></script>
<script src="http://www.liverpoolcraftbeerexpo.com/wp-content/themes/craft/js/jquery.ba-hashchange.js"></script>
<div id="content-wrap">
    <div class="main-grid">
        <div class="grid-block small-width small-height" hook="test">CLICK</div>
        <div class="grid-break excluded"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-break excluded"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div class="grid-block small-width small-height"></div>
        <div id="content-preview-test" class="content-block-preview">test</div>
    </div>
</div>

CSS

#content-wrap {
    position: absolute;
    width: 910px;
    height: auto;
    top: 80px;
    left: 50%;
    margin-left: -455px;
}
.main-grid {
    width: auto;
    position: relative;
    margin: 0 auto;
    top: 0;
}

.grid-block {
    margin-bottom: 10px;
    background-color: pink;
    color: black;
}
.small-width {
    width: 220px;
}
.small-height {
    height: 220px;
}
.grid-break {
    position: relative;
    width: 100%;
    height: 200px;
    background-color: orange;
    margin-bottom: 10px;
}
.grid-break {
    display: none;
}
.content-block-preview {
    display: none;
}
/*
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;
    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;
    -ms-transition-duration: 0s;
    -o-transition-duration: 0s;
    transition-duration: 0s;
}

JavaScript

jQuery(document).ready(function () {
    jQuery(window).hashchange(function () {
        var hash = location.hash;
        if (hash) {
            var element = jQuery('.grid-block[hook="' + hash.substring(1) + '"]');
            if (element) showDetail(element);
        }
    });

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

        $container.imagesLoaded(function () {
            $container.isotope({
                itemSelector: '.grid-block, .grid-break:not(.excluded)',
                animationEngine: 'best-available',
                masonry: {
                    columnWidth: 8,
                    gutterWidth: 25
                }
            });
        });



        jQuery(".grid-block").click(function () {
            document.location.hash = jQuery(this).attr('hook');
        });
    });

    function showDetail(element) {
        jQuery('.content-block-preview').hide();
        var previewForThis = element.nextAll('.grid-break:first');
        var otherPreviews = element.siblings('.grid-break').not(previewForThis);
        otherPreviews.addClass('excluded') // exclude other previews from masonry layout
        .hide();
        previewForThis.removeClass('excluded')
            .append(jQuery('#content-preview-' + element.attr('hook')).show())
            .hide()
            .delay(400)
            .fadeIn("slow");
        $container.isotope('reLayout');
    }

});