Is it possible to write a JavaScript code in Webflow to hide a parent DIV element when a child element is set to Block, specifically when a CMS collection has no items?

Yes, it is possible to write JavaScript code in Webflow to hide a parent DIV element when a child element is set to "Block", especially when a CMS collection has no items.

To achieve this, you'll need to use the Webflow Interactions feature and write a custom JavaScript code.

Here's the step-by-step process:

1. First, select the parent DIV element that you want to hide when the child element is set to "Block".
2. In the Webflow Designer, go to the "Interactions" panel for the selected element (parent DIV).
3. Click on the "+" icon to create a new interaction.
4. Choose the trigger for the interaction. In this case, you will use the "Affect different element" option.
5. In the "Select trigger" dropdown, choose the child element that determines whether the parent DIV should be hidden or not. For example, if you have a CMS Collection List Wrapper and want to hide the parent DIV when there are no items in the collection, select the Collection List Wrapper.
6. Set the trigger event to "While page is scrolling".
7. Next, you'll need to set a condition for the interaction. Click on the "+" icon in the "Conditional filter" section and select "Element is visible".
8. In the "Value" field, enter "Block". This means the interaction will only be triggered when the child element is set to "Block".
9. Now, it's time to create the action for the interaction. Click on the "+" icon in the "Actions" section and choose "Hide".
10. In the "Hide" action options, select the parent DIV element that you want to hide when the condition is met.
11. Finally, publish your Webflow site to make the custom JavaScript code functional.

By setting up this interaction, the parent DIV element will be hidden when the child element (CMS Collection List Wrapper in this case) has no items, i.e., when the child element is set to "Block". This allows you to dynamically hide elements based on CMS content and user actions.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer

Other Webflow Questions

What could be causing the scrolling issue on my Webflow search result page on mobile and how can I fix it?

In Webflow, I have set the Slider width to be 1/3 of the Mask width, displaying three slides at once. However, when scrolling left, the Slider jumps three slides instead of one. How can I change this behavior to scroll one slide at a time? Additionally, how can I ensure that incomplete slides are shown again after scrolling, instead of being skipped over?

Why does Webflow not allow buttons to be clicked and prevent navigation to other pages upon first loading the site?

How can I implement a navbar that shows on scroll-up and hides on scroll-down in Webflow? This feature is particularly useful for mobile browsing.

How can I edit and link new pages in the menu of my Webflow site? Additionally, why is the scrolling effect not working when I share the site but works in the editor?

Is it possible to set the title of a blog in Webflow CMS to h2 for better SEO, instead of the default h1?

How can I fix the issue with my Webflow dropdown menu not expanding in Chrome, even though it works in Firefox and Edge?

Can I duplicate and save my home page as another page in Webflow?

Is there a way to obtain the internal Webflow Page ID and internal Webflow Item ID within a Webflow page or using custom code or HTML embeds?

Is it possible to achieve a scrollable content with sticky side navigation using just the Webflow tools, or is custom code required?

How can I undo the changes I made in Webflow when I accidentally deleted a section without backing it up and there is no option to undo or cancel the changes?

What advantages does Webflow offer over Netsuite Site Builder for creating and editing a branded website, even if the client is already familiar with Netsuite and considering using it for their new AI tool? Can Webflow integrate with Netsuite to provide similar features, or would it be more beneficial for them to choose Webflow instead?

How can I adjust the height of the slider in Webflow? The default height is not sufficient for my images, and I need to make them taller. Thank you for any assistance you can provide!

Can Webflow be used to set colors for uploaded SVG files, such as custom made icons, graphics, and product silhouettes?

How can I make a modal pop up on exit intent in Webflow? My site is Read-Only.

Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?

Can the Webflow YouTube component recognize channel IDs instead of video IDs for embedding a Live Stream?

How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?

How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?

How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?

How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?

How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?

How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?

How can I whitelist the IP or user agent of a third-party vendor to crawl my Webflow site for legal compliance archiving purposes?

How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?

How can I dynamically redirect to a CMS created after form submission in Webflow?

How can I make the menu close when a link is clicked in Webflow?

How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?

How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?

How can I add user input to the end of the redirect URL in Webflow?