Hide element on page if dynamic collection is empty

Hi all,

I’ve got a dynamic list with a headline above it. When the list is empty It’s essential for us that nothing appears. It’s easy to make the list itself show nothing. But how can I hide the headline above it?

It looks to me as if there is no way to do that through the Webflow interface. Is that correct. If so, I’m wondering whether this can be done with some Javascript. But I’ve never learned JS, so would be looking for some help with the code needed.

Many thanks!

Please post both your public share link and published link whenever asking for help on the forums.

Hi @samliew Thank you very much for your reply (which I’ve missed).

Below is the link to an example. What I’m trying to do is to hide the headline above the empty dynamic list, only if the list is empty (either because there are no items in the collection, or a filter is set so that no results are shown).

So there could be some code hiding the headline if .w-dyn-list wasn’t in the below list.

Many thanks for any suggestions.


Anyone would be able to give input here, please?

I don’t see how to do it clean. I know a dirty solution though. Give a class to the empty state, set the text color to white, the bg color to white, position:relative, then place the empty state block upper, covering the title…

Yep, it’s dirty :slight_smile:

1 Like

Yep, that’s dirty :wink: Thanks for your reply thought. I wonder whether there is any jQuery JS code that’d do it, but unfortunately I’m no good at JS.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.