How to show/hide html controls keeping their locations the same?

Question

Imagine search bar on html page, it has, say 4 controls on the same line, each wrapped in DIV. E.g. a few listboxes on the same line:
searchbyX, byY, byZ, byN After some clicks, some of these controls are hidden, some are displayed (using JQuery). The problem is that I want each control to keep it's place, but if I hide it's left neighbour, it will move to the left, thus not keeping its original position.

How to show/hide controls keeping their locations the same?

Answer 1

If I understand you correctly,

visibility: hidden

will do the trick. It will hide the element, but reserve the space it needs.

To make it visible again, remove the property or set a explicit

visibility: visible

Answer 2

Instead of hiding them by setting "display" to "none", set "visibility" to "hidden".