Hide entire DIV when nested CMS switches are off

Design help CMS
1

Hi there!

I have a problem I can’t solve…
I have a DIV that contains a heading and two or more tags.
Each tag is visible when it is switched to “on” in the CMS (conditional visibility).

image
image741×407 4.4 KB

Now I would like to achieve to hide the entire DIV when all switches are “off” (-> no tags to display).
Conversely, this means that the DIV is displayed when one or more switches are “on”.

Can someone maybe help me with this?
Thanks in advance!

2

Do you mind sharing a read-only link so we can take a closer peek at your setup?

3

Hi Mike,
thanks for your answer. Unfortunately I am not allowed to show the project yet as it is a customer project.

But the structure looks like this:
image
In this case the whole DIV should be hidden.

And here the DIV should be visible:
image

4

Tip: Create a new project and implement a demo that mimics your issue that you can share. We can’t debug in the dark.

2 Likes
5

Like @webdev mentioned, you’ll need to create a sample project so we can check out the setup within the Designer before we can help.

There are a few different ways I can imagine this being setup (each with their own solution) and unfortunately giving us code snippets doesn’t provide enough context.

1 Like
6

Ok, I built something:
https://preview.webflow.com/preview/testdrive-f6740f?utm_medium=preview_link&utm_source=designer&utm_content=testdrive-f6740f&preview=ac5d3edc4ea354481c7100e4ee760f98&workflow=preview

Here in “Product 2” the “Features” DIV should not be displayed.
I hope this makes my problem easier to understand.

7

I solved it with this:

<script>
// get all children of all .div-block-3 elements that have the class .group
document.querySelectorAll('.div-block-3 > .group').forEach((el) => {
  const tag = el.querySelectorAll('.div-block-2 > .div-block');
  // check if all tags have style "display: none"
  let hasVisible = false;
  tag.forEach((el) => {
    const style = window.getComputedStyle(el);
    if (style.display !== 'none') {
      hasVisible = true;
    }
  })
  if (!hasVisible) {
    el.style.display = 'none';
  }
})
</script>