Webflow sync, pageviews & more.
NEW
Answers

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.

Rate this answer

Other Webflow Questions