Conditional Visibility with multiple collection lists?

Design help CMS
1

Hello guys,

I am creating a website in Webflow, which has multiple collection lists on a static page, so I designed a static page wich displays all kind of those lists: https://stimo.webflow.io/aktualnosci

It contains: aktualnosci, projekty and praca collection lists.
My client asked me to create a conditional visibility for a praca collection list. They want to hide this whole section, when there is no published praca item.

Is it possible to do in Webflow?

2

Welcome @curtao!

There is a page in the Webflow University that I recommend you review if you haven’t.
It should help you resolve your issue.

If you are still stuck, let us know.

3

Thank you for your reply.

Of course i’ve got through this article earlier. The problem is that there is no “conditional visibility” fields on item I want to hide, when collection is empty…

Please see a screen below:

image
image1915Ă—632 79.2 KB

4

Please include your site’s Read-Only Share Link with your question.
A read-only link allows the community to view your project without making any edits to it and help diagnose your issue or provide feedback.

If your project has custom code or layout issues on the published site, please share that URL/URI as well.

5

Of course, here is my Read-Only Share Link:

https://preview.webflow.com/preview/stimo?utm_medium=preview_link&utm_source=designer&utm_content=stimo&preview=9ea3eca2dde41494b271d6b2779f612f&pageId=608d3fb04b65147114cca8f3&workflow=preview

The problem exists on “Aktualności” page.

1 Like
6

To conditionally act on an element outside of the collection list you would need to use custom code. I would add an ID to the collection list wrapper and use that as the target to get the length of the array. If zero then hide the wrapper you wish to target (best to use an ID on that element as well. Here is an example using jQuery that needs to be modified for your use case and elements.

// Code block in before body close in page settings
<script>
if (!$('#collection-list-id-to-target').length){
    $('#wrapper-id-to-hide').hide();
}
</script>
2 Likes
7

It took me a while to understand that JavaScript code, but it works fine for me :slight_smile: thank you!