filtering page

<!-- MASONRY / ISOTOPE CREDIT: https://isotope.metafizzy.co -->

<script src="//unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script src="//unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        // init Isotope
        var $grid = $('#tags_container').isotope({
            itemSelector: '.section',
            masonry: {
                gutter: 1
            },
            hiddenStyle: {
                opacity: 0
            },
            visibleStyle: {
                opacity: 1
            },
            transitionDuration: '0.5s'
        });
        // layout Isotope after each image loads
        $grid.imagesLoaded().progress(function() {
            $grid.isotope('layout');
        });
        // store filter for each group
        var filters = {};
        $('.filters').on('click', '.button', function() {
            var $this = $(this);
            // get group key
            var $buttonGroup = $this.parents('.button-group');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[filterGroup] = $this.attr('data-filter');
            // combine filters
            var filterValue = concatValues(filters);
            // set filter for Isotope
            $grid.isotope({
                filter: filterValue
            });
        });
        // change is-checked class on buttons
        $('.button-group').each(function(i, buttonGroup) {
            var $buttonGroup = $(buttonGroup);
            $buttonGroup.on('click', 'button', function() {
                $buttonGroup.find('.is-checked').removeClass('is-checked');
                $(this).addClass('is-checked');
            });
        });
        // change size of item by toggling gigante class
        $grid.on('click', '.section', function() {
            $(this).toggleClass('expand');
            // trigger layout after item size changes
            $grid.isotope('layout');
        });
    });
    // flatten object by concatting values
    function concatValues(obj) {
        var value = '';
        for (var prop in obj) {
            value += obj[prop];
        }
        return value;
    }
</script>