Filter

Example 5 - Complex filter system

Filter using many filter types: buttons, search input, radios, checkboxes, select dropdowns --- with a mix of exclusive and multi filtering

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List

  • Setting up buttons, search input, radios, checkboxes, and select dropdowns that will filter our Collection List. We'll see how all filters work together to create a complex filtering system

  • Structure of one unique class to the filter group's parent element and data-attributes to each button

  • Setting up our array (list) to hold all of the filter groups

  • The .filter() component to make our Collection List grid filterable with many filter groups

  • An explanation of the difference between exclusive vs. multi filtering options

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Branding
Web Design
Development
Motion
Strategy
All
Red
Yellow
Blue
Green
Orange
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Project 1
2019
Blue
Fun
used cms true

Branding, Web Design

Project 2
2020
Blue
Fun
used cms false

Branding

Project 3
2017
Red
Not fun
used cms true

Web Design

Project 4
2018
Yellow
Not fun
used cms false

Development

Project 5
2018
Green
Fun
used cms true

Development

Project 6
2018
Blue
Not fun
used cms false

Motion Graphics

Project 7
2019
Blue
Fun
used cms true

Branding

Project 8
2020
Yellow
Fun
used cms false

Web Design

Project 9
2020
Orange
Fun
used cms true

Web Design, Development

Project 10
2020
Green
Not fun
used cms false

Web Design, Development

Project 11
2019
Yellow
Not fun
used cms true

Strategy Consulting

Project 12
2017
Red
Not fun
used cms false

Web Design, Development

Project 13
2019
Red
Not fun
used cms true

Web Design

Project 14
2020
Red
Fun
used cms false

Strategy Consulting

Project 15
2017
Blue
Fun
used cms true

Branding, Motion Graphics

Project 16
2018
Blue
Not fun
used cms false

Branding, Web Design

Project 17
2018
Blue
Fun
used cms true

Strategy Consulting

Project 18
2018
Red
Fun
used cms false

Branding, Web Design

Project 19
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 20
2020
Green
Not fun
used cms false

Branding, Web Design

Project 21
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

Project 22
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 23
2019
Yellow
Not fun
used cms true

Motion Graphics

Project 24
2017
Orange
Fun
used cms false

Motion Graphics

Project 25
2019
Green
Fun
used cms true

Branding, Web Design

Project 26
2020
Yellow
Fun
used cms false

Branding

Project 27
2017
Red
Not fun
used cms true

Web Design

Project 28
2018
Red
Not fun
used cms false

Development

Project 29
2018
Red
Not fun
used cms true

Development

Project 30
2018
Blue
Not fun
used cms false

Motion Graphics

Project 31
2019
Blue
Fun
used cms true

Branding

Project 32
2020
Blue
Fun
used cms false

Web Design

Project 33
2020
Red
Not fun
used cms true

Web Design, Development

Project 34
2020
Yellow
Fun
used cms false

Web Design, Development

Project 35
2019
Green
Fun
used cms true

Strategy Consulting

Project 36
2017
Blue
Fun
used cms false

Web Design, Development

Project 37
2019
Blue
Not fun
used cms true

Web Design

Project 38
2020
Yellow
Not fun
used cms false

Strategy Consulting

Project 39
2017
Orange
Fun
used cms true

Branding, Motion Graphics

Project 40
2018
Green
Not fun
used cms false

Branding, Web Design

Project 41
2018
Yellow
Fun
used cms true

Strategy Consulting

Project 42
2018
Red
Fun
used cms false

Branding, Web Design

Project 43
2019
Red
Fun
used cms true

Branding, Web Design

Project 44
2020
Red
Not fun
used cms false

Branding, Web Design

Project 45
2020
Blue
Not fun
used cms true

Branding, Strategy Consulting

Project 46
2020
Blue
Not fun
used cms false

Branding, Strategy Consulting

Project 47
2019
Blue
Not fun
used cms true

Motion Graphics

Project 48
2017
Red
Fun
used cms false

Motion Graphics

Project 49
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 50
2020
Green
Not fun
used cms false

Branding

Project 51
2017
Blue
Fun
used cms true

Web Design

Project 52
2018
Blue
Fun
used cms false

Development

Project 53
2018
Yellow
Fun
used cms true

Development

Project 54
2018
Orange
Not fun
used cms false

Motion Graphics

Project 55
2019
Green
Not fun
used cms true

Branding

Project 56
2020
Yellow
Fun
used cms false

Web Design

Project 57
2020
Red
Not fun
used cms true

Web Design, Development

Project 58
2020
Red
Fun
used cms false

Web Design, Development

Project 59
2019
Red
Fun
used cms true

Strategy Consulting

Project 60
2017
Blue
Fun
used cms false

Web Design, Development

Project 61
2019
Blue
Not fun
used cms true

Web Design

Project 62
2020
Blue
Not fun
used cms false

Strategy Consulting

Project 63
2017
Red
Not fun
used cms true

Branding, Motion Graphics

Project 64
2018
Yellow
Not fun
used cms false

Branding, Web Design

Project 65
2018
Green
Fun
used cms true

Strategy Consulting

Project 66
2018
Blue
Fun
used cms false

Branding, Web Design

Project 67
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 68
2020
Yellow
Fun
used cms false

Branding, Web Design

Project 69
2020
Orange
Fun
used cms true

Branding, Strategy Consulting

Project 70
2020
Green
Fun
used cms false

Branding, Strategy Consulting

Project 71
2019
Yellow
Not fun
used cms true

Motion Graphics

Project 72
2017
Red
Not fun
used cms false

Motion Graphics

Project 73
2019
Red
Fun
used cms true

Branding, Web Design

Project 74
2020
Red
Not fun
used cms false

Branding

Project 75
2017
Blue
Fun
used cms true

Web Design

Project 76
2018
Blue
Fun
used cms false

Development

Project 77
2018
Blue
Fun
used cms true

Development

Project 78
2018
Red
Not fun
used cms false

Motion Graphics

Project 79
2019
Yellow
Not fun
used cms true

Branding

Project 80
2020
Green
Not fun
used cms false

Web Design

Project 81
2020
Blue
Not fun
used cms true

Web Design, Development

Project 82
2020
Blue
Fun
used cms false

Web Design, Development

Project 83
2019
Yellow
Fun
used cms true

Strategy Consulting

Project 84
2017
Orange
Not fun
used cms false

Web Design, Development

Project 85
2019
Green
Fun
used cms true

Web Design

Project 86
2020
Yellow
Fun
used cms false

Strategy Consulting

Project 87
2017
Red
Fun
used cms true

Branding, Motion Graphics

Project 88
2018
Red
Not fun
used cms false

Branding, Web Design

Project 89
2018
Red
Not fun
used cms true

Strategy Consulting

Project 90
2018
Blue
Fun
used cms false

Branding, Web Design

Project 91
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 92
2020
Blue
Fun
used cms false

Branding, Web Design

Project 93
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 94
2020
Yellow
Fun
used cms false

Branding, Strategy Consulting

Project 95
2019
Green
Not fun
used cms true

Motion Graphics

Project 96
2017
Blue
Not fun
used cms false

Motion Graphics

Project 97
2019
Blue
Not fun
used cms true

Branding, Web Design

Project 98
2020
Yellow
Not fun
used cms false

Branding

Project 99
2017
Orange
Fun
used cms true

Web Design

Project 100
2018
Green
Fun
used cms false

Development

Clone me!

You are almost there! Clone this template by clicking the link above. Learn, play around, test, use your own content, and have fun.

You can delete all .delete-me divs! All of the How-To content is in the .clonable divs.

More examples
1 filter, exclusive
1 filter, multi
2 filters, exclusive and multi
Filter by search
Really crazy complex filter with every filter option
1 nested collection, dynamic filter buttons
Load More
Component
Sort
Component
Made with
by