Advanced Filtering

Control what appears, intelligently

Filter any element, by expression

Add advanced algorithmic filtering to any element on your page.

  • + Allows you to conditionally display any element on your page, based on a javascript formula.
  • > If it evaluates to true, the element appears.
  • Executes once, on page load.
  • + Elements are visually hidden until the logic is run to determine filtering.
  • - Not useful for secure content. A determined user can view source and see your hidden element content, or play with CSS to make it visible ( on their computer only ).
  • Filtering expression is inline, and can be any legitimate Javascript expression.
  • Example uses
  • > Filtering elements by different times of the day, different days of the week, weeks of the year, seasons, and so on.

DEMO

Below are two elements which are filtered so that only one is visible. Here, the filtering is applied based on the current hour of your local system clock.

This element is only visible between noon and midnight.

Filtering is specified by placing adding the following custom attribute to the DIV element above.

Webflow Custom Attribute
Name
wfu-filter
Value
new Date().getHours() >= 12
This element is only visible between midnight and noon.

Filtering is specified by placing adding the following custom attribute to the DIV element above.

Webflow Custom Attribute
Name
wfu-filter
Value
new Date().getHours() < 12

Filter collection list items, by expression

Add advanced algorithmic filtering to your collection lists or to any element on your page.

  • + Allows you to call a custom function that you define, which will decide whether or not to show each individual element.
  • > + The function can do anything you want, including calling external services, to make its determination.
  • > + This is particularly useful for e.g. specific date calculations which Webflow's filtering cannot support.
  • This is most useful when your logic is too long or complex to specify in the attribute value with wfu-filter

DEMO

The below collection list shows items that have a date of the current month- but the day and year do not matter.

7 of the Best Examples of Beautiful Blog Design
July 18, 2022
The History Of Web Design
February 11, 2023
10 Things Nobody Told You About Being a Web Designer
August 29, 2022
How to improve Web Design Process
October 20, 2022
5 Great Web Design Resources
May 26, 2022
20 Myths About Web Design
February 4, 2023
10 Web Design Blogs You Can't Miss
May 3, 2022
14 Common Misconceptions About Web Design
March 16, 2022
10 Great Examples of Responsive Websites
June 7, 2022
5 Web Design Blogs You Should Be Reading
June 14, 2022

Filtering is specified by placing adding the following custom attribute to the Collection Item part of the Collection List above. The referenced filter function is in the </body> code area.

Webflow Custom Attribute
Name
wfu-filter-func
Value
isCurrentMonth

How to implement

See the designer view of this page by clicking the button at the top.
Further notes & script examples are in the CodePen.

Also, see a video demonstration of the setup for reference.

See the Pen Webflow | Test Element Filtering by Michael Wells (@memetican) on CodePen.