I have a collection list on a dynamic page template, and I want to hide a div when there are no list items

Design help CMS
1

Hello everyone! I have a Dynamic Page template for the many Departments of a company. Within the template, I have a “Latest News” section which I’ve wrapped in a div that includes:
An h2 that says “Latest News”, and a collection list of Articles (which has its own CMS collection).

Each Article has a reference field so that I can choose which department the Article is from.

But, not every Department has Articles to show. So, I get an empty state. To solve this, I went to the Article Collection List Item and give that conditional visibility:
Element is visible when Department Equals Current Department

That works, HOWEVER, the gotcha is that it doesn’t get rid of the pagination buttons nor the “Latest News” h2. I get why (since those two elements are actually outside of the collection list) - but is there anyway to hide those elements automatically?

Thank you so much for your help!

2

Thank you for the solution you introduced in your question. It solved my problem.

I had created a collection within a collection to show case the colors of a product, but it showed empty space for the products that did not have colors.

Now, with your help, it only shows the color divs when an Items color is set (the color filed was a multireference to a collection named colors with available colors as items)