jQuery Plugin To Filter DOM Elements By Tags - Tagsort

File Size: 7.5 KB
Views Total: 3991
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Filter DOM Elements By Tags - Tagsort

Tagsort is a lightweight, flexible jQuery plugin that provides a client side filtering on a grid of DOM elements categorized by tags.

Basic usage:

1. Load the stylesheet tagsort.min.css in the head section and the tagsort.min.js at the bottom of the document.

<link href="path/to/tagsort.min.css" rel="stylesheet"></link>
<script src="path/to/jquery.min.js"></script>
<script src="path/to/tagsort.min.js"></script>

2. Create a grid of DOM elements and assign single or multiple tags to them using data-item-tags attribute.

<div class="item" data-item-id="1" data-item-tags="tag-1">
  Item 1

<div class="item" data-item-id="2" data-item-tags="tag-2">
  Item 2

<div class="item" data-item-id="3" data-item-tags="tag-3">
  Item 3


3. Enable the filter.

  • inclusive: when multiple tags are selected, all elements that contain ANY of those tags will be shown
  • exclusive: when multiple tags are selected, only elements that contain ALL of those tags will be shown
  items: '.item-tagsort',
  tagElement: 'span',
  tagClassPrefix: false,
  itemTagsView: false,
  itemTagsSeperator: ' ',
  itemTagsElement: false,
  sortType: 'exclusive',
  fadeTime: 0,
  reset: false,
  sortAlphabetical: false

Change logs:


  • bugfix


  • Add option for alphabetical sorting.


  • Added Reset Element Option


  • Fixed Flashing + Performance Improvements


  • Fixed bug with blank class prefix


  • Single filter bug fix


  • Single-select option and filtering


  • Fixed Bug with Inclusive Filtering

This awesome jQuery plugin is developed by wchaering. For more Advanced Usages, please check the demo page or visit the official website.