JSFiddle - React, Tailwind, and code Playground

by jpruizs

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.1/masonry.pkgd.min.js"></script>
<h1><a href="#" class="link" data-row="first">first row</a> -  <a href="#" class="link" data-row="second">second</a> - <a href="#" class="link" data-row="third">third</a></h1>
<div class="container first">
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
</div>

<div class="container second">
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
</div>

<div class="container third">
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
    <div class="activity">
        <h3>title</h3>
        <p>content</p>
    </div>
</div>

CSS

.container{
    width:300px;
    margin:0 auto;
    clear:both;
}
.activity{
    border: 1px solid;
    padding:5px;
    margin-bottom:10px;
}

JavaScript

$(function(){
    // Apply masonry layout to all containers
    var $container = $('.container');
    $container.masonry({
        columnWidth: 50,
        itemSelector: '.activity',
        gutter: 15
    });
    
    
    $('.link').click(function(){
        // Hide all visible containers
        $(".container:visible").hide();
        
        // Get the container to show
        row = $(this).attr('data-row');
        var $container = $("." + row);
                
        $container.toggle('slow');
        
        $container.masonry({
            columnWidth: 50,
            itemSelector: '.activity',
            gutter: 15
        }).masonry();
    });
    
});