JSFiddle - React, Tailwind, and code Playground

jQuery Sorting

by Jennifer Perrin

HTML

<div class="sortCont">
    <h1>jQuery Sorting</h1>
    
    <ul class="filter">
        <li data-type="kitten">Kittens</li>
        <li data-type="square">Square</li>
        <li data-type="round">Round</li>
        <li class="active">All</li>
    </ul>
    
    <ul class="objects">
        <li data-type="kitten" class="item">
            <img src="http://placekitten.com/50" style="width:50px; height:50px" />
        </li>
      <li data-type="kitten" class="item">
            <img src="http://placekitten.com/150" style="width:50px; height:50px" />
        </li>
        <li data-type="round" class="item"></li>
        <li data-type="kitten" class="item">
          <img src="http://placekitten.com/75" style="width:50px; height:50px" />
        </li>
        <li data-type="square" class="item"></li>
        <li data-type="round" class="item"></li>
        <li data-type="square" class="item"></li>
        <li data-type="kitten" class="item">
          <img src="http://placekitten.com/95" style="width:50px; height:50px" />
        </li>
        <li data-type="square" class="item"></li>
        <li data-type="round" class="item"></li>
        <li data-type="square" class="item"></li>
        <li data-type="kitten" class="item">
          <img src="http://placekitten.com/35" style="width:50px; height:50px" />
        </li>
        <li data-type="square" class="item"></li>
        <li data-type="round" class="item"></li>
        <li data-type="kitten" class="item">
          <img src="http://placekitten.com/125" style="width:50px; height:50px" />
        </li>
    </ul>
</div>

<div id="footer">
    <p>Unless otherwise noted, this content is licensed under a <a href="http://creativecommons.org/licenses/by/3.0" target="_new">Creative Commons Attribution 3.0 License</a>.<br />Visit <a href="http://jenniferperrin.com/blog" target="_new">www.jenniferperrin.com</a> for more <a href="http://jenniferperrin.com/blog/snippets/">Snippets</a> and <a...

CSS

@import url(http://fonts.googleapis.com/css?family=Cuprum);

body {
    padding: 30px; 
    font-family: "Cuprum"; 
    background:#333 url(http://jenniferperrin.com/image/background.gif);
}

.sortCont {
    width: 400px;
    margin: 0 auto;
}

h1 {
  font-size: 35px;
  margin-bottom: 30px;
  color: #fff;
  text-shadow: 0 1px 1px #ccc;
  letter-spacing: .02em;
  font-weight: bold;
  text-align: center;
}

/* --- jQuery Sort Styles --- */
.item {
  float: left;
  margin: 0 20px 20px 0;
  padding: 0;
  width: 50px;
  height: 50px;
  list-style: none;  
  border-radius: 5px;
  box-shadow: 0 0 10px #000;
  border: 4px solid rgba(255,255,255,.2);
  transition: all .25s ease;
}

li[data-type=kitten] {
  background: #bcbcbc;
}

li[data-type=square] {
  background: #5a7c87;
}

li[data-type=round] {
  background: #f26222;
  border-radius: 30px;
}

.filter {
  padding: 0;
  float: left;
  width: 100%;
  margin-bottom: 50px;
}

.filter li {
  margin-right: 10px;  
  float: left;
  font-size: 14px;
  list-style: none;
  background: rgba(0,0,0,.4);
  padding: 8px 20px;
  border-radius: 10px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 1px 3px #000;
  -webkit-transition: background .25s ease;
}

.filter .active, .filter .active:hover {
  background-color: #789b2e !important;
}

.filter li:hover {
  background: #111;
}

/* --- Footer Styles --- */
#footer {
    height: 100px;
    clear:both;
    padding-top: 20px;
}
    #footer p {
        font-family: 'Cuprum';        
        text-align: center;
        font-size: 13px;
        color: #fff;
    }
    #footer a, #footer a:visited {
        color: #f26222;
        text-decoration: none;
        outline: none;
    }
        #footer a:hover{
            color: #b15030;
            text-decoration: none;
        }

JavaScript

// Just a few lines of jQuery are used to add a sorting capability based on data-type attribute.
// Super Easy & lightweight! 

jQuery(function($) {

    $(".filter li").click(function() {

        // Store data-type attribute
        var catagory = $(this).attr("data-type");

        // Hide all the matched elements
        $('.objects li').hide();

        // if 'catagory' is not defined hide/show all elements ("All" button),
        // if catagory IS defined show elements that match catagory variable
        (!catagory) ? $('.objects li').hide().fadeIn(1500) : $('li[data-type="' + catagory + '"]').fadeIn(1500);

        // Classes for the filter buttons
        $('.active').removeClass('active');
        $(this).addClass('active');

    });

});