<ix-bounce>Filter: Part 1<ix-bounce>

In lesson #7, we learn how to use the Filter component. We will learn how to set up, modify and implement, an exclusive filter and a multi-filter. Check out this tutorial's live example below. For more examples, go to CMS Library How-to.

Easily generate javascript code with the Visual Script Writer. For help with implementation, shoot us a message on Sweet JS. If you have any questions/feedback, please comment on this lesson's Youtube video.

Timestamps:
  • 00:07 - Intro
  • 01:28 - Setting up the Filter component
  • 09:26 - Generate code with Visual Script Writer
  • 14:38 - Adding an Active state to the Filter buttons
  • 18:57 - Setting up Multi-Filter
  • 20:25 - What's next?

Live Example

Monkey

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Black
1

Gorilla

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Red
2

Elephant

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Purple
3

Cheetah

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Black
4

Hummingbird

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Red
5

Logo

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Purple
6