Hi all,
Quick question - I have a section that contains a title and a Collection List. My goal is to make it visible/invisible based on whether or not a Collection List filter returns any items.
Thoughts?
Here is my public share link: LINK
Hi @feeei
Did you manage to figure this out, or still need some help?
So far, no. I think it’s a limitation of webflow unless I do some custom coding of some sort. Ideas?
Hi @feeei
Which page/section should I look for - is it the home page?
Hey @StuM,
The pages in question are the individual project pages. Go to Projects to find thumbnails of individual projects.
For two examples, check out Queen Richmond Centre West (with news items) and 83 Redpath (without news items) for examples.
Thanks for looking into it!
Hi @feeei
It looks like you have switches and multi-reference fields for various related items, but not one for ‘related news’ (similar to how you are currently filtering things for the projects).
If you can do the same for the news items - switches etc, you could then set conditional visibility on the ‘Project Grid’ Div which holds both the related news title and the ‘sorry no items found’ empty state.
@StuM, thanks for taking a look at it.
Ok, so from what I understand, you are suggesting that I use switches in the Project Collection to toggle sections on and off manually. Yes, I could do that, but was hoping for an automatic way to do this. The problem with manual toggle from the Project Collection side is human error. Switches for visibility are easy to understand IF you are on the same collection/page (i.e. A switch in the Project Collection addresses the Project Collection Page). If someone enters an item into the News Collection that multi-references a Project, they have no idea about this switch they need to switch on at the Project Collection side to make it actually show up there.
It’s hard to explain this but hope it is clear.
I would prefer it to be automatic, but your suggestion will work in a pinch.
Hmm, to take a step out of it - what about conditional vis on the ‘Project Grid’ for the news, and have it only display when a ‘Related News’ (multi-ref) is ‘set’ (set = has an entry) ?
I have been looking for this option but it’s not possible because it’s the News item that is multi-ref to Projects, not Project to News, like the tags are. So I can do this for any field in the Project Collection, but since News items is not one of them, I can’t set that.
So right now the news grid displays all news items that have the current project referenced, but it has no way of knowing if it has items or not, and doesn’t allow me to set conditional visibility based on that.
But yes, the feature you describe is exactly the one I’d like to have.
Ah, so I guess the end goal here is the client is most likely going to be posting news about a project, and they need to quickly reference the project from their news item, rather than updating each project by multi-referencing each new news story (less human error).
cc @vincent - King of Webflow data structures - any thoughts on this one?
I tried myself at it but it’s exactly like Fei-Ling said, projects aren’t a ref to news, so you hit an impossibility.
It’s delicate to use multi refs with filters, it’s quite limited. For instance we can’t use it to mimick a real tag system (vocabulary, taxonomy, whatever you call it). The conclusion is we really need a tag system in Webflow CMS 
For now users try to approach it using multi-refs, options fields, but it’s limited.
So the solution here must be a design solution: change either the design (content) or the database structure. One way to approach it is to count less on automation and more on editorial. What I mean by this is that there is always a finite amount of CMS items, and thing you’d want to be automatic (such as the related news section) could be dome manuall, like deciding for each item what news post you’d want to display. I understand that it won’t be automatic anymore and that you may have to edit items to link more recent news, but having to manually chose what linked content you propose inside of an item can lead to a better editorial quality.
Not to get too off-topic… yes, maybe we need a true “tag” system, but I really love how Webflow allows us to turn Collections into “tags” by using multi-ref relationships because it lets these tags exist in their own universe of siloed content. I can easily create customized pages for every tag where we can go more in depth about just that topic. It’s hard to do something like that in Wordpress where the tag link will simply return a list of posts with that tag in it, unless you replace the category template with a custom-made page… and what if you want a description, an image, an icon etc. associated with the tag, managed through a CMS?
It’s not that easy in Wordpress out of the box. But Webflow makes it ridiculously simple.
We’re pushing the boundaries of dynamic content and Collections’ awareness of one another. Hopefully one day it will become a feature so to become even more dynamic and content-responsive.
I :webflow_heart: Webflow and it does so many awesome things already.
So for now, we’ll work around these small hiccups. Thanks for the input @vincent @StuM
100% agree with above. For those here, I solved this with a bit of custom code:
#${$(elem).data('hide-when-empty')});That snippet will hide the parent element when the empty state is visible.
Thank you @jamesvclements
The scripts works fine. The text which you’ve added misses some $-signs from the screenshot and had some strange quotation-marks (at least for me with a mac and a german keyboard).
Here’s my adapted code:
<script>
window.addEventListener('DOMContentLoaded', (event) => {
$('[data-hide-when-empty]').each((i, elem) => {
const emptyState = $(`#${$(elem).data('hide-when-empty')}`);
if (emptyState.is(':visible')) {
$(elem).css('display', 'none');
}
});
});
</script>
Hi thanks for this script. For some reason it’s not working for me. Any ideas why?
This is my site - Parables, Myths and Symbols of the White Lotus Sutra by Sangharakshita
Section to hide is the one titled ‘Featured in’
I see there are still some people struggling with this now and then, I’m working on a small project that includes a fix for this, it is still a WIP but some of the functionalities are already up, here’s the link, you can see the full functionality there👍🏼, hope it helps someone out there.
SA5’s HTML lib has a “hide section w/ empty collection lists” feature just for this purpose.