Hiding an entire section if dynamic list is empty

[pminnelli]

I am trying to hide an entire section if/when a dynamic list is in an empty state and need some help. There was a previous post that was helpful but need further clarification. This is the previous topic:

Option to automatically hide entire section (not just the dynamic list) if collection inside is empty

It would be possible to hide an entire news/blog section, event list etc. when there's no content. Edit: I know you can hide the dynamic list when there's no items. I want to hide an entire section containing the list. This way there won't even be any need for an "empty items message".

I’ve tried to paste this script that was provided by leozakour into the custom code field although wasn’t sure which field (inside head tag or before /body tag) so I pasted into both. Here’s the script:
<script> ('.w-dyn-empty').parents('.section').each(function(){ (this).hide()}) </script>

It’s not working as is, but expect that I’ve not got things set up correctly. I just need some guidance on using the script properly.

This is the page I’m working on:
http://kbc-website.webflow.io/music

And it’s the ‘Announcements’ section near the top of the page.

Any assistance is much appreciated.

---

Here is my site Read-Only: https://preview.webflow.com/preview/kbc-website?utm_source=kbc-website&preview=ee631eac59bebf7054145c21d50f3a6b

[Noah-R]

You can try to add a toggle switch in the collection “Hide Section if Empty”

When that toggle is ON you can set the condition for that toggle in the settings panel.

[pminnelli]

Thanks for the suggestion, but I’m trying to hide the entire section that the wrapper sits inside of. I’m not sure how this control works in that regard. If I simply hide the dynamic content wrapper, the heading ‘Announcements’ is still showing, and I want that to be hidden as well. Do you have any suggestions on how I integrate the script so that the parent element (section) becomes hidden when there are no results?

[rileyrichter]

Hi, I’m happy to help here!!

So this is the code you’re referring to:

<script>
$('.w-dyn-empty').parents('.section').each(function(){ $(this).hide()})
</script>

You’ll notice that when it mentions parent, it gives the class ‘.section’ — so in order to make this script work, just give the section your Dynamic Collection List is in the class

section

Then everything should function just fine for you!

Just make sure that script goes into the “Before body tag” box!

[pminnelli]

Ok, will try that, thanks.

[pminnelli]

Ok, that worked when I added a div around the content and put that class name into the script. It wouldn’t work when the class was attached to the actual page section. Not sure why.

[webdev]

Could you share your published page so someone could take a look?

[Noah-R]

@rileyrichter Awesome! Thanks so much for sharing that!

[rileyrichter]

Glad to help!