visibility: hidden: Hides an element, but the space it occupies is preserved. (least favorable)
display: none: Hides an element and removes it from the layout, no space is reserved. (document.querySelector will fail)
hidden attribute: Similar to display: none, hides an element without space reservation, mainly used in HTML5 for toggling visibility. (complete removal from rendered UI, but not from DOM)
Gotcha about hidden. Need to add [hidden] { display: none; } in CSS for "toggle" code to work
document.querySelectorwill fail)Gotcha about
hidden. Need to add[hidden] { display: none; }in CSS for "toggle" code to work