Conditional visibility of nested CMS collection

I am building a careers page, where I have open position in the form of drop down / accordion. See image for reference.

Currently I have it setup as 2 collections where one is nested in the other one. Specifically the main collection is the category (design, product etc.) and the nested collection are actual open positions.

I would like to setup a conditional visibility, that if there are no open positions currently listed, the main category does not appear. Currently I have a workaround, but that’s not great for maintenance, as you need to do multiple steps in order to deactivate position (not great for managing). Is there a way to make this work? The goal is, that if the position is listed, the recruiter can just switch off the button and deactivate it.

Or is there a way to make it work within one collection?

Thanks a lot, honestly I’ve been trying to crack this for a while to no avail. So any help would be super appreciated. If there is a need for custom code, I can definitely scribble something with help of ChatGPT, but honestly not really sure what needs to happen for it to work.

Link to my preview :slight_smile:

I’ve actually never tried this on a nested collection list, let me know how it works.

Yes but it would involve a fair bit of custom code work to create your elements dynamically in the hierarchy you’re looking for. The basic approach here would be to generate the positions only in one big sorted collection list, and then “insert” the headings and the necessary grouping wrappers to create your layout.

Thanks I am going to try this and will report back :). Also it’s not a bad idea, to just remove the category CMS collection all together and just set a visibility whether there is something listed or not. Just not sure if that’s possible.

Ok!

Unforunately this does not work. Not sure if it’s solution itself, or it’s because technically the collection list items are not empty (they are just not listed) but technically they are in the collection.

That would depend on how you built it, but typically if it’s a filtered list the items wouldn’t be there, and Webflow adds a special class to indicate empty state.

Nested lists may not include that indicator class.

However the basic technique is the same. You can either just custom code or custom CSS to hide the section when that list is empty, and you can define “is empty” based on any rules you like.

to be honest this goes beyond my Webflow knowledge :smiley: even though I would say I am intermediate and can make workaround around many things, I am not that familiar with code, so usually these things are hit or miss. But I guess with this description I will be able to scribble something with the chatgpt help :D.

But thank you. Will probably try it it tomorrow and will report if I will have any success.

1 Like

If you get completely stuck and this is important, drop me a line. This is the kind of work I do, and interesting UX’s are fun to build.

Hey! Thanks a lot! Honestly I dropped it for a few days as it seemed like it would take more of the time than I originally anticipated and I am also currently without staging as we are setting reverse proxy right now (Our devs found some weird framework, which does not work properly, so we’re now redoing it). So I will pick up on it in few days. But thanks for the offer I will try to figure out and if I will have any issue I would take upon your offer. Or post a solution :).