pxlrbt/filter-elements

Filter HTML Elements by tag based filters by setting an data attribute.

Filter Elements

Let's you filter HTML Elements by tag based filters by setting an data attribute. Supports clickable handles and selects.

Installation

npm install @pxlrbt/filter-elements

Usage

import FilterElements from '@pxlrbt/filter-elements';
var filter = new FilterElements();

<a data-filter-key="tags" data-filter-value="">All</a>
<a data-filter-key="tags" data-filter-value="js">JavaScript</a>
<a data-filter-key="tags" data-filter-value="html">HTML</a>

<div>
  <div data-filterable data-filter-tags="js"></div>
  <div data-filterable data-filter-tags="js,html"></div>
  <div data-filterable data-filter-tags="html"></div>
</div>

[data-filterable] {
    display: none;
}

[data-filter-filtered="false"] {
    display: block;
}