Comparison
display: nonevsvisibility: hidden
display: none
you hid the panel and everything below it moved up to fill the space it used to take.
Removing an element from the render tree entirely: it takes no space, is not painted, is not reachable by keyboard, and is not announced by a screen reader. Toggling it forces a full reflow of everything after it, and any transition on the element cannot run because there is no box to transition. It is the right choice when the content genuinely should not exist for anyone, and the wrong one when you only wanted it invisible.
Full entry →visibility: hidden
you hid the element and the gap where it used to be stayed exactly the same size.
Keeping an element in layout but not painting it: it still occupies its space, is not clickable, and is hidden from assistive technology. Because the box still exists it can be transitioned and does not force the surrounding layout to move, which makes it the right tool for placeholders and for hiding something without shifting the page. A descendant can override it back to `visible`, which `display: none` does not allow.
Full entry →