You are here: Home / Freebies For Websites / Demos & Snippets

JavaScript & CSS3 Content Filter + Refine with Multi-Category Select

Select and refine your content categories, and view them in a collapsed group, with this JS and CSS3 filter.

JavaScript performs the item filtering, and CSS3 transitions fade the results into view. Categories are defined with classes on each ".filter-item" div.

Results can be refined to show items that have multiple category class selections ("inclusive" filtering), OR, hide items that have multiple category class selections ("exclusive" filtering).

Please view the source of this page for HTML markup, CSS and JS.

Demo 1 - Inclusive Filter (show selected)

Select "mild" and "veg" and only the items that do have the ".mild" and ".veg" classes will be displayed (show items having all of the selected category classes).

Filter:
Starter Veg Samosa

Crispy fried pastry shells with a savoury filling of spiced potatoes and peas (2 pieces).

£2.75
  • Mild
  • Veg
Starter Cut Mirchi

Julienned pepper covered in rice flour, fried to a crisp and sprinkled with onion.

£4.95
  • Hot
  • Veg
  • Special
Starter Prawn Pakora

Jumbo prawns dipped in a spiced chickpea flour, and fried.

£10.75
  • Mild
  • Special
Starter Chili Chicken

Crispy fried boneless chunks of chicken, tossed in a hot pepper sauce.

£7.95
  • Hot
Main Rogan Josh

Cubes of lamb simmered with onions, tomatoes and spices, in a sealed pot.

£13.95
  • Medium
Main Lamb Vindaloo

Boneless lamb and potatoes sautéed with cumin, onion, tomatoes, and lemon juice.

£14.95
  • Hot
  • Special
Main Tikka Masala

Marinated boneless chicken, grilled and sautéed in a tomato sauce, with ginger and coriander.

£13.50
  • Mild
Main Aloo Gobhi

Cauliflower and potatoes, sautéed to perfection, in mild spices with tomatoes, onion and garlic.

£9.95
  • Mild
  • Veg
Sorry, no items match your filter selection(s).

Demo 2 - Exclusive Filter (hide selected)

Select "mild" and "veg" and only the items that do not have a ".mild" or ".veg" class will be displayed (show items having none of the selected category classes).

Filter:
Starter Veg Samosa

Crispy fried pastry shells with a savoury filling of spiced potatoes and peas (2 pieces).

£2.75
  • Mild
  • Veg
Starter Cut Mirchi

Julienned pepper covered in rice flour, fried to a crisp and sprinkled with onion.

£4.95
  • Hot
  • Veg
  • Special
Starter Prawn Pakora

Jumbo prawns dipped in a spiced chickpea flour, and fried.

£10.75
  • Mild
  • Special
Starter Chili Chicken

Crispy fried boneless chunks of chicken, tossed in a hot pepper sauce.

£7.95
  • Hot
Main Rogan Josh

Cubes of lamb simmered with onions, tomatoes and spices, in a sealed pot.

£13.95
  • Medium
Main Lamb Vindaloo

Boneless lamb and potatoes sautéed with cumin, onion, tomatoes, and lemon juice.

£14.95
  • Hot
  • Special
Main Tikka Masala

Marinated boneless chicken, grilled and sautéed in a tomato sauce, with ginger and coriander.

£13.50
  • Mild
Main Aloo Gobhi

Cauliflower and potatoes, sautéed to perfection, in mild spices with tomatoes, onion and garlic.

£9.95
  • Mild
  • Veg
Sorry, no items match your filter selection(s).

Setting-up Filters

Each checkbox filter group should have a unique name;

<input type="checkbox" id="mild" class="filter-input" name="filter" /><label for="mild" class="filter-label info-mild">Mild</label>
<input type="checkbox" id="med" class="filter-input" name="filter" /><label for="med" class="filter-label info-med">Medium</label>
<input type="checkbox" id="hot" class="filter-input" name="filter" /><label for="hot" class="filter-label info-hot">Hot</label>

And the unique checkbox id of each filter should match the corresponding label's "for" attribute;

<input type="checkbox" id="veg" class="filter-input" name="filter" /><label for="veg" class="filter-label">Veg</label>

Which must also match the filterable class on the relevant filter-item(s);

<div class="filter-wrap">
    <div class="filter-item starter mild veg">
        <span>Starter</span>
        <b> Veg Samosa </b>
        <p>Crispy fried pastry shells with a savoury filling of spiced potatoes and peas (2 pieces).</p>
        <i>£2.75</i>
        <ul>
            <li class="info-mild">Mild</li>
            <li class="info-veg">Veg</li>
        </ul>
    </div>
    ... <!-- more filter-items here -->
</div> <!-- closing .filter-wrap -->

The "All" checkbox must also carry the ".filter-all" class, and should be checked;

<input type="checkbox" id="filter-all" class="filter-input filter-all" name="filter" checked /><label for="filter-all" class="filter-label">All</label>

Related

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.