Filtering A Group Of Elements Using CSS Classes – vanilla-filters

Preview:

Description:

A vanilla JavaScript library for filtering a group of html elements using CSS classes. It uses CSS3 transitions for the element shuffle effect.

How to use it:

Add the stylesheet style-philters.css and JavaScript style-philters.js to the webpage.

<link rel="stylesheet" href="style-philters.css">
<script src="vanilla-filters.js"></script>

Categorize & group your elements using CSS classes as follows:

<div id="results">
  <div class="result philter-1">
    <a href="1.jpg">
      <img src="1.jpg" alt="placeholder image" />
    </a>
  </div>
  <div class="result philter-1 philter-4">
    <a href="2.jpg">
      <img src="2.jpg" alt="placeholder image" />
    </a>
  </div>
  <div class="result philter-2">
    <a href="3.jpg">
      <img src="3.jpg" alt="placeholder image" />
    </a>
  </div>
  <div class="result philter-3">
    <a href="4.jpg">
      <img src="4.jpg" alt="placeholder image" />
    </a>
  </div>
  <div class="result philter-1 philter-2">
    <a href="5.jpg">
      <img src="5.jpg" alt="placeholder image" />
    </a>
  </div>
  ...
</div>

Create buttons to filter the elements.

<div id="philters-wrapper">
  <ul id="philters">
    <li><a href="#philter-1">Filter 1</a></li>
    <li><a href="#philter-2">Filter 2</a></li>
    <li><a href="#philter-3">Filter 3</a></li>
    <li><a href="#philter-4">Filter 4</a></li>
    <li><a id="surprise-me" href="#surprise-me">Surprise Me</a></li>
    <li><a id="clear-philters" href="#clear-philters">Clear Filters</a></li>
  </ul>
</div>

Initialize the vanilla-filters with some options.

philterContent('#philters', '#results', {
  viewFilters: 'Open Filters',
  hideFilters: 'Close Filters',
  clearTarget: '#clear-philters',
  surpriseTarget: '#surprise-me'
});

All default options.

philterContent('#philters', '#results', {
  // Customize text for View Filters action
  viewFilters: 'View Filters', 
  // Customize text for Hide Filters action
  hideFilters: 'Hide Filters', 
  // Clear Filters element id or class if desired. Leave as empty string to exclude from your filters.
  clearTarget: '', 
  // Surprise element id or class if desired. Leave as empty string to exclude from your filters.
  surpriseTarget: '', 
  // Customize warning message
  warningMsg: 'Whoops! Looks like your search is too narrow. Try removing a selected filter or clear all filters to try again.' 
  
});