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?
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?
