Hide parent DIV if child collection has 0 items

Design help Custom code
1

Good morning,

I made a CMS collection which references another collection and in some cases it will return “No items found”.

Default webflow filtering won’t work, as there is nothing to reference.
I am thinking if I could write a JS code which would observe the state of the dom and if the child element is set to Block, it would apply the display none to the parent element.

In other words, if the DIV containing no items is being shown, it would trigger the function which would hide the parent div which in turn will hide the child div and also the div with the text I don’t want.

I know it might be confusing, but all I want to hide a collection when it has no items.

Here is the link to the collection with 0 items - I would love to hide entire DIV with heading called Materials & the collection block:
https://pikem-cms-v4.webflow.io/research-areas/high-performance-metals-metallic-compounds

But I would love to display the collection when it has items, like in this example:

https://pikem-cms-v4.webflow.io/research-areas/photonics-and-optoelectronics-research

Hope this makes sense? :slight_smile:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

We needed the same thing and integrated it here.
It’s available to add to your site just as a custom attribute.

1 Like
3

@memetican smashing! that is LOVELY! Checked upon CSS file as well and it has even more useful features built in, such as Truncate text, etc!
Many thanks!