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!

4

Good morning, @memetican ,

I am handing the website to a client and have noticed that SEMrush is actually pinging unminified CSS files, in this instance it’s the referenced file you offered me.

Do I have to worry about minifying the file? I know it’s just a warning, not an erorr, but still? :slight_smile:

Screenshot 2023-06-14 at 08.03.59
Screenshot 2023-06-14 at 08.03.591920×1227 185 KB

5

It can already be minified, just change the URL extension to .min.js

1 Like
6

HI @memetican ,
Thank you again. Sorry for a dumb question - I tried replacing extension to .min.js, but after publishing it didn’t work. Could you please advise on how to properly use that?

Many thanks!
p.s. already using this script for other client too :slight_smile:

7

Aaah, apologies Eugene, I didn’t notice which lib you where using. 99% of the Sygnal Attributes tools are JS libs.

The one you’re using is just the CSS file so it needs to end in .min.css

The actual CDN URL is https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.10/dist/css/webflow-html.min.css

Which makes your minified library reference;

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.10/dist/css/webflow-html.min.css">

1 Like
8

@memetican LEGEND!!!