JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<script src="/js/jquery.quicksand.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="filterContent">
    <div class="active"><a class="all" href="#">All</a></div>
    <a class="boxl" href="#">Links</a>
    <a class="boxv" href="#">Video</a>
    <a class="jp-audio" href="#">MP3</a>
    <a class="boxq" href="#">Quotes</a>
    <a class="gallery" href="#">Gallery</a>
</div>

<div id ="container">
    <div class="boxl">name vijay</div>
        <div class="boxq">quote vijay</div>
        <div class="boxv">video vijay</div>
        <div class="gallery">gallery vijay</div>
        <div class="jp-audio">audio vijay</div>
    
    
</div>

CSS

//http://www.branded3.com/b3labs/how-to-create-an-animated-portfolio-filter-using-jquery-and-the-quicksand-plugin/

JavaScript

$contentHolder = $('#container');
$contentClone = $contentHolder.clone();

$('.filterContent a').click(function(e) {
    e.preventDefault();

    $filterClass = $(this).attr('class');
alert($filterClass);
    $('.filterContent div').removeClass('active');
    $(this).addClass('active');

    if($filterClass == 'all'){
        $filters = $contentClone.find('div');
    } else {
        $filters = $contentClone.find('div[class~='+ $filterClass +']');
    }

    $contentHolder.quicksand($filters, {
        duration: 1000,
        easing: 'easeInOutQuint'
    });
});