Sort

Example 3: Multi sort option

Sort by 4 different sorting options

See Finsweet
Walkthrough

What we will cover

  • The structure of our CMS Collection List

  • Sorting by text within the collection by applying a class to the text

  • Structure of a class and data-attribute on our sort button

  • The .sort() component to make the Collection List sortable by multiple sorting options

  • An explanation of the difference between sortReverse true vs. false

Sort by 1 value
Sort by Project Number
Sort by Color
Sort by Year
Sort by Service
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 sort
1 sort reverse
Multi sort
Multi sort with combine
Combine
Component
Filter
Component
Made with
by