If you have a heading or some other content around a CMS list on a page - you may not want to display any of it if the CMS list is empty. The below piece of code will hide the page section if it’s empty. From my memory, it also works if used to hide a slide containing an empty lists.
<script>
// HIDE SECTION WHEN EMPTY
// $(".page-section").has(".w-dyn-empty").css("display", "none");
</script>
It does not work when there is a slider element within but will work with the below piece of code - set overflow for the section to “hidden”:
<script>
// HIDE SECTION WHEN EMPTY
// $(".page-section").has(".w-dyn-empty").css("height", "0");
</script>
I think the idea of @Diarmuid_Sexton is to be able to hide stuff conditionally even on static pages which embark a collection list.
Otherwise the conditional visibility built in webflow works on cms pages directly.
Question about this. Would it work if the CMS list is not in a section on its own, but there’s several CMS lists inside of a section and I want to hide only the ones that are empty?
Further explanation: I have a CMS page with tabs. Inside one of the tabs, I have several CMS lists stacked in different divs filtered for different articles in the website based on regions of the world (one page for each region). I’m trying to hide the empty CMS lists so the mission is to hide the divs of those CMS lists that display no content due to the filter when you change from one CMS page to another. I hope I’m making sense.
Is it possible?
Please let me know if I’m over-complicating things and there’s an easier way to do this.
Sounds great, thank you for clarifying. Should I copy and paste the code several times and change the “.page-section” for each div? I’m not very good at coding so when it comes to custom, well, I gotta ask.
I’ve got the same problem with hiding empty CMS sections, but the code above doesn’t seem to be working.
I’ve got a CMS template page that has a different number of CMS items on three different pages across a number of sections, but I’m struggling to hide the empty sections.
If this doesn’t take you to the right page, it’s the ‘Artists’ page and then either ‘Charlie Gray’ or ‘Tariq Howes’ - I’m trying to hide the empty .Project-Section-Artists and .100vh-Section-Artists
I have a simple, pretty bullet proof solution. Just needed to do this and I was googling around to find something and I didn’t like what was out there. Figured I’d share because this is the best approach for me and I’ll be using this for the foreseeable future.
Step By Step Process: Duplicate the Collection & Add CSS To Empty State
Put an ID on the section you want to hide conditionally (this is the one that presumably already has a CMS collection somewhere nested inside it).
Create new collection list (linked to the collection you’re working with) just above the section you want to hide and give it a class with a descriptive name. I’m working on an “Upcoming Events” section so I named it “UE Visibility”.
Under that class (“UE Visibility” for me) set the Layout to “None” so nothing we do in here affects the layout beyond what we want.
In the Empty State of our “Visibility” collection add an embed block (and delete the random default text).
Finally in the code add the display: none; CSS code targeting the ID we applied in step one. All done, we can hide anything on the page based on the collection being empty.
You can also hypothetically do a lot of deeper hide/show logic based on any item in the collection or any empty property, since you can filter this “Visibility” collection by any field to only show a single item, and then apply conditional visibility to any embed block so we probably could conditionally include any style block on the page based on the CMS with a little more flexibility than what webflow offers right now.
Clarification + Minor Inconveniences
Note: Sometimes, only in the designer, this “display: none;” is a little persistent, so I created a component with this hide/show logic so I can just delete it while I’m developing and drag it back in when I’m ready to launch. That’s an extra step but it’s better than having to redo everything again. It works flawlessly in my production env.
Also note: you don’t have to put the “Visibility” collection right next to the section but I find that that’s very helpful for me. If it’s clear to you what I’m doing, feel free to name/move this wherever you want.
