Webflow Layout Techniques

Hide Collection List on Empty, or Item Qty

Overview
Responsive Layout Techniques
102
Element Layouts
Aspect Ratio
201
Responsive Image Annotations
6:50
202
Collection List Alternating Item Layouts
4:32
601
Collection Page & Collection List Layouts
Collection List Card Layouts
4:32
601
Creating Variable Layout Options, per Collection Item
11:46
602
Random List Items on Every Page Refresh
10:00
603
Variable Collection Item Sizes in a Grid Layout
603
Limit Collection List Items by Breakpoint
10:00
604
Hide Collection List on Empty, or Item Qty
605
Responsive Pagination
605
Masonry Grid Layouts
607
Glossary w/ Letter Groupings
612
Comparison Grid Layout
612
CMS Style Multiref-Matched Items
11:00
614
Master-Detail Layouts
Master-Detail Layouts
710
CMS-Driven Expando
19:42
714
Special Layouts
Creating Leader Lines
5:54
821
Photo Gallery Layouts
821
Column Layouts
822
Text Layouts
823
Checkerboard Grid Styling
824
Tetris Grid Layouts
12:00
826
Advanced Techniques
Breakpoints
901
No items found.
Published
January 16, 2023
Updated
in lightbox

Sometimes you want your collection list to appear only if it has the right number of list items;

  • Contains at least one item
  • Contains at least X items
  • Contains no more than X items
  • Contains a specific number of items, e.g. 3

Sometimes, you even want an entire list-containing area of your layout to hide/show depending on the item count of that list.

Yes, you can, and it can all be done purely with CSS.

IMPORTANT: as @webdev notes in the Webflow forums, as of Jan-2023 the :has CSS pseudoselector has about 80% coverage in browsers and is not yet implemented by Firefox.
If 100% coverage is important to you, you may need to use a script based approach to this rather than the CSS one recommended here.

Examples

For all examples, let's assign that list or list-containing DIV an ID of listArea.

Add the custom code to your page or site /head area, or to an HTML Embed if you want it to take effect in the designer as well.

Show if at least one item

Collection Lists have the ability to show alternate content when they are empty, and you can make this alternate element blank. But what if you want to hide the entire section containing that list?

Show if the item count is exactly X

You want the whole thing to appear only if there are X collection list items, and to disappear of there are more, or less than that.

NOTE: change 3 in the code to the exact number of items you want.

Show if the item count is less than X

NOTE: change 3 in the code to the maximum number of items you want, plus 1.

Show if the item count is more than X

NOTE: change 3 in the code to the minimum number of items you want.

References

https://css-tricks.com/solved-with-css-logical-styling-based-on-the-number-of-given-elements/

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.