KPC
Kevin Powell - Community•3w ago
raw-power

Hiding an element when other elements set to display:none

https://codepen.io/peterchanning/pen/XJWKPNO Please see the above codepen This all works great, select the dropdown for fruits and it filters the divs to only show ones that contain the fruits and desserts that contain the fruit. But when doing the same for desserts, it filters perfectly (no fruits showing, only desserts of that type), but the <h1> heading for Fruit still shows and looks odd.
Can we use a method to also hide the <h1> tag if there are no visible <div> elements? Is there a pure CSS solution or if not, any Javascript way?
Peter Channing
CodePen
Untitled
...
3 Replies
Chris Bolson
Chris Bolson•3w ago
[I deleted my replies as I realized that I had miss-understood the issue] I am not sure how this could be done with CSS alone, I am still looking at it. It could probably be done by checking each select value but this wouldn't be very scaleable. In the meantime here is a JS solution which attaches an event listener to the select lists: 
// check if all .card elements inside .container are hidden
function checkCards() {
  document.querySelectorAll('.container').forEach(container => {
    // select  .card elements
    const cards = Array.from(container.querySelectorAll('.card')); 
    
    // define container display depening on whether it contains visible cards or not
    container.style.display = (cards.length > 0 && cards.every(card => getComputedStyle(card).display === 'none'))
      ? 'none'
      : '';
  });
}
// run if you want to check the cards on load
//checkCards();

// select elements event listener
// note - this should really just select the corresponding select elements)
document.querySelectorAll("select").forEach(s => s.addEventListener("change", checkCards));
// check if all .card elements inside .container are hidden
function checkCards() {
  document.querySelectorAll('.container').forEach(container => {
    // select  .card elements
    const cards = Array.from(container.querySelectorAll('.card')); 
    
    // define container display depening on whether it contains visible cards or not
    container.style.display = (cards.length > 0 && cards.every(card => getComputedStyle(card).display === 'none'))
      ? 'none'
      : '';
  });
}
// run if you want to check the cards on load
//checkCards();

// select elements event listener
// note - this should really just select the corresponding select elements)
document.querySelectorAll("select").forEach(s => s.addEventListener("change", checkCards));
Note - I realize that this is just a demo but your should only have a single <h1> element in any page. I now realize that your code doesn't actually work the way I thought it did. You are hiding all the fruit cards when a desert is selected. So, in fact my original reply (which I deleted) would work for what you require in the specific case of hiding the "fruits" title element when the selecting something from the "deserts" select list. 
html:has(#dessertFilter option[value="all"]:not(:checked)) :nth-child(1 of .container) > h1{
  display: none;
}
html:has(#dessertFilter option[value="all"]:not(:checked)) :nth-child(1 of .container) > h1{
  display: none;
}
Note 1 - Giving the "container" elements ids or data-attributes to use as CSS selectors would make this more robust as selecting by nth-child would break if you add more or if you change the order. Note 2 - this doesn't actually do what you requested in that it isn't detecting if there are no div elements visible. I don't believe that this is possible in CSS alone (would love to be proved wrong)
raw-power
raw-powerOP•3w ago
thank you Chris, let me look into it, you've been a great help
clevermissfox
clevermissfox•2w ago
does this need to be scalable or only work with these exact values? if its just these exact values it can work with some monster selectors and being very cognizant of specificity. it will break if any of the attributes change. JS would be so much easier though. Im not entirely sure when the heading should be visible so its likely not perfect but hopefully it can give you an idea https://codepen.io/Miss-Fox/pen/PwoGdPZ?editors=1100 EDIT: forget to mention that you can only have one h1 on any single page. W3C WAI Accessibility on Headings How-to
CleverMissFox-GAcct
CodePen
#discord-toggle-visibility
...
Web Accessibility Initiative (WAI)
Headings
Accessibility resources free online from the international standards organization: W3C Web Accessibility Initiative (WAI).
How-to: Accessible heading structure - The A11Y Project
Headings are the backbone of the content of a page. A visitor should be able to scan or navigate a webpage using headings to get a good impression of its content.

Did you find this page helpful?