Sort

Example 1: 1 sort option

Sort by 1 sorting option with the first click to sort A > Z

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 1 sorting option

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

Sort by 1 value
Sort by Project Number
Project 500
2019
Green
Fun
used cms false

Branding, Web Design

Project 499
2018
Yellow
Not fun
used cms true

Branding, Web Design

Project 498
2018
Red
Fun
used cms false

Branding, Web Design

Project 497
2018
Blue
Not fun
used cms true

Strategy Consulting

Project 496
2017
Blue
Not fun
used cms false

Branding, Web Design

Project 495
2020
Blue
Fun
used cms true

Branding, Motion Graphics

Project 494
2019
Red
Fun
used cms false

Strategy Consulting

Project 493
2017
Red
Fun
used cms true

Web Design

Project 492
2019
Red
Not fun
used cms false

Web Design, Development

Project 491
2020
Yellow
Fun
used cms true

Strategy Consulting

Project 490
2020
Green
Fun
used cms false

Web Design, Development

Project 489
2020
Orange
Not fun
used cms true

Web Design, Development

Project 488
2019
Yellow
Not fun
used cms false

Web Design

Project 487
2018
Blue
Not fun
used cms true

Branding

Project 486
2018
Blue
Not fun
used cms false

Motion Graphics

Project 485
2018
Green
Fun
used cms true

Development

Project 484
2017
Yellow
Fun
used cms false

Development

Project 483
2020
Red
Fun
used cms true

Web Design

Project 482
2019
Blue
Not fun
used cms false

Branding

Project 481
2017
Blue
Fun
used cms true

Branding, Web Design

Project 480
2019
Blue
Not fun
used cms false

Motion Graphics

Project 479
2020
Red
Not fun
used cms true

Motion Graphics

Project 478
2020
Red
Fun
used cms false

Branding, Strategy Consulting

Project 477
2020
Red
Fun
used cms true

Branding, Strategy Consulting

Project 476
2019
Yellow
Fun
used cms false

Branding, Web Design

Project 475
2018
Green
Not fun
used cms true

Branding, Web Design

Project 474
2018
Orange
Fun
used cms false

Branding, Web Design

Project 473
2018
Yellow
Fun
used cms true

Strategy Consulting

Project 472
2017
Blue
Not fun
used cms false

Branding, Web Design

Project 471
2020
Blue
Not fun
used cms true

Branding, Motion Graphics

Project 470
2019
Green
Not fun
used cms false

Strategy Consulting

Project 469
2017
Yellow
Not fun
used cms true

Web Design

Project 468
2019
Red
Fun
used cms false

Web Design, Development

Project 467
2020
Blue
Fun
used cms true

Strategy Consulting

Project 466
2020
Blue
Fun
used cms false

Web Design, Development

Project 465
2020
Blue
Not fun
used cms true

Web Design, Development

Project 464
2019
Red
Fun
used cms false

Web Design

Project 463
2018
Red
Not fun
used cms true

Branding

Project 462
2018
Red
Not fun
used cms false

Motion Graphics

Project 461
2018
Yellow
Fun
used cms true

Development

Project 460
2017
Green
Fun
used cms false

Development

Project 459
2020
Orange
Fun
used cms true

Web Design

Project 458
2019
Yellow
Not fun
used cms false

Branding

Project 457
2017
Blue
Fun
used cms true

Branding, Web Design

Project 456
2019
Blue
Fun
used cms false

Motion Graphics

Project 455
2020
Green
Not fun
used cms true

Motion Graphics

Project 454
2020
Yellow
Not fun
used cms false

Branding, Strategy Consulting

Project 453
2020
Red
Not fun
used cms true

Branding, Strategy Consulting

Project 452
2019
Blue
Not fun
used cms false

Branding, Web Design

Project 451
2018
Blue
Fun
used cms true

Branding, Web Design

Project 450
2018
Blue
Fun
used cms false

Branding, Web Design

Project 449
2018
Red
Fun
used cms true

Strategy Consulting

Project 448
2017
Red
Not fun
used cms false

Branding, Web Design

Project 447
2020
Red
Fun
used cms true

Branding, Motion Graphics

Project 446
2019
Yellow
Not fun
used cms false

Strategy Consulting

Project 445
2019
Green
Not fun
used cms true

Web Design

Project 444
2017
Orange
Fun
used cms false

Web Design, Development

Project 443
2019
Yellow
Fun
used cms true

Strategy Consulting

Project 442
2020
Blue
Fun
used cms false

Web Design, Development

Project 441
2020
Blue
Not fun
used cms true

Web Design, Development

Project 440
2020
Green
Fun
used cms false

Web Design

Project 439
2019
Yellow
Fun
used cms true

Branding

Project 438
2018
Red
Not fun
used cms false

Motion Graphics

Project 437
2018
Blue
Not fun
used cms true

Development

Project 436
2018
Blue
Not fun
used cms false

Development

Project 435
2017
Blue
Not fun
used cms true

Web Design

Project 434
2020
Red
Fun
used cms false

Branding

Project 433
2019
Red
Fun
used cms true

Branding, Web Design

Project 432
2017
Red
Fun
used cms false

Motion Graphics

Project 431
2019
Yellow
Not fun
used cms true

Motion Graphics

Project 430
2020
Green
Fun
used cms false

Branding, Strategy Consulting

Project 429
2020
Orange
Not fun
used cms true

Branding, Strategy Consulting

Project 428
2020
Yellow
Not fun
used cms false

Branding, Web Design

Project 427
2019
Blue
Fun
used cms true

Branding, Web Design

Project 426
2018
Blue
Fun
used cms false

Branding, Web Design

Project 425
2018
Green
Fun
used cms true

Strategy Consulting

Project 424
2018
Yellow
Not fun
used cms false

Branding, Web Design

Project 423
2017
Red
Fun
used cms true

Branding, Motion Graphics

Project 422
2020
Blue
Fun
used cms false

Strategy Consulting

Project 421
2019
Blue
Not fun
used cms true

Web Design

Project 420
2017
Blue
Not fun
used cms false

Web Design, Development

Project 419
2019
Red
Not fun
used cms true

Strategy Consulting

Project 418
2020
Red
Not fun
used cms false

Web Design, Development

Project 417
2020
Red
Fun
used cms true

Web Design, Development

Project 416
2020
Yellow
Fun
used cms false

Web Design

Project 415
2019
Green
Fun
used cms true

Branding

Project 414
2018
Orange
Not fun
used cms false

Motion Graphics

Project 413
2018
Yellow
Fun
used cms true

Development

Project 412
2018
Blue
Not fun
used cms false

Development

Project 411
2017
Blue
Not fun
used cms true

Web Design

Project 410
2020
Green
Fun
used cms false

Branding

Project 409
2019
Yellow
Fun
used cms true

Branding, Web Design

Project 408
2017
Red
Fun
used cms false

Motion Graphics

Project 407
2019
Blue
Not fun
used cms true

Motion Graphics

Project 406
2020
Blue
Fun
used cms false

Branding, Strategy Consulting

Project 405
2020
Blue
Fun
used cms true

Branding, Strategy Consulting

Project 404
2020
Red
Not fun
used cms false

Branding, Web Design

Project 403
2019
Red
Not fun
used cms true

Branding, Web Design

Project 402
2018
Red
Not fun
used cms false

Branding, Web Design

Project 401
2018
Yellow
Not fun
used cms true

Strategy Consulting

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.