JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<link rel="stylesheet" href="http://isotope.metafizzy.co/css/style.css">
<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.js"></script>
<ul id="filters">
  <li><a href="#" data-filter="*">show all</a></li>
  <li><a href="#" data-filter=".metal">metal</a></li>
  <li><a href="#" data-filter=".transition">transition</a></li>
  <li><a href="#" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</a></li>
  <li><a href="#" data-filter=":not(.transition)">not transition</a></li>
  <li><a href="#" data-filter=".metal:not(.transition)">metal but not transition</a></li>
</ul>

<p class="text_category hide" data-category="casa">
Donec auctor faucibus libero, eget faucibus nunc volutpat at. Nunc eros metus, tempor et laoreet at, lobortis quis odio. Cras dictum nulla at neque accumsan lobortis. Duis malesuada tortor eu urna blandit at mattis enim aliquam. Nullam elit dui, adipiscing a blandit sit amet, rutrum tempus nisl.
</p>

<div id="container">
  <div class="element transition metal">...</div>
  <div class="element post-transition metal">...</div>
  <div class="element alkali metal">...</div>
  <div class="element transition metal">...</div>
  <div class="element lanthanoid metal inner-transition">...</div> 
  <div class="element halogen nonmetal">...</div> 
  <div class="element alkaline-earth metal">...</div>
  ...
</div>

CSS

.hide {
display: none;
}

JavaScript

var $container = $('#container');
// initialize isotope
$container.isotope({
  // options...
});

// filter items when filter link is clicked
$('#filters a').click(function(){
  var selector = $(this).attr('data-filter');
    $(".text_category").slideUp(500);
   $(".text_category").slideDown(500);
  $container.isotope({ filter: selector });
  return false;
});