Hiding an entire section if dynamic list is empty

Design help General
1

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:

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: Webflow - KBC Website

1 Like
2

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.

00%20PM
00%20PM3360×1894 507 KB

3

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?

4

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!

7 Likes
5

Ok, will try that, thanks.

6

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.

7

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

8

@rileyrichter Awesome! Thanks so much for sharing that!

1 Like
9

Glad to help! :smiley:

1 Like
10

Thanks for that script. I’m curious, how would I implement a logical and/or statement to this.

For instance, I have a section with the class .section--clear and multiple containers with collection lists called .content--clear.

Screen Shot 2021-09-09 at 9.28.48 AM

How could I hide the section only if all the containers in it are empty?

11

Hey peeps,

I can’t get the script above to work… any advice? My coding skills are not great.

12

Hi Hugo, I have a nocode solution for this;

1 Like
13

This was a great, simple solution, thanks so much!

1 Like
14

I need this desperately. I added the library. But, in your instructions you say " Apply wfu-hide or wfu-suppress to the sections you want to hide" UH… if people don’t code, they have no idea where to add it. Add where? Do I duplicate the already applied class to the section, and rename it that? Where does it go? I put wfu-hide as the ID for the Section. Still doesn’t work.

15

Hi Paul, are you talking about this section of the docs?
Those are custom attributes.

image
image828×591 25.3 KB

You’ll find your custom attributes under your element settings panel of the designer. Here are Webflow’s docs on how to use them.