Jquery hide element while preserving its space in page layout

javascript

responsive-design

performance

best-practices

byAlex Kataev·Feb 27, 2025

To hide an element without disturbing its space in the layout, use CSS visibility: hidden;. This method retains the element's positional dimensions, keeping the page structure constant.

Quick code snippet:

.invisible {
    visibility: hidden; /* Blink and I'm gone! */
}

<div class="invisible">You cannot see me, but I'm still here!</div>

To conceal or reveal elements dynamically using jQuery, employ the following code:

// Hide element - Now you see it...
$('#yourElement').css('visibility', 'hidden');

// Show element - Now you don't! Poof!
$('#yourElement').css('visibility', 'visible');

Smoother Transitions — Fade effects

To gracefully fade an object away, use fadeTo(). This retrieves the object's original opacity, then animates it to the specified opacity, keeping the element's place intact.

// Gradual disappearance with fadeTo()
$('.apple').fadeTo('slow', 0, function() {
    $(this).css('visibility', 'hidden'); /* Try to find me now! */
});

Consider implications on user interactions. visibility: hidden; disables all mouse events while opacity: 0; keeps the object fully transparent, yet interactive. Remember, not everything that is not seen is not there!

Space for Rent vs No Vacancy

While visibility: hidden makes an element invisible but keeps its space, hide() makes the object disappear and frees up its space. Select wisely!

// Completely remove
$('#yourElement').hide(); /* Hide and Seek Level = Expert */

// Bring back to visible spectrum
$('#yourElement').show(); /* And...I'm back! */

Choosing the Right Cloak — Use Cases

Tooltips appearing and disappearing should not create jerky movements. visibility: hidden ensures a smoother user experience.

Lazy loading placeholders

If space is reserved for a widget that loads later, visibility:hidden can be used wisely to prevent layout jumps.

Form structure stability

To conditionally hide form elements without distorting the overall form layout, visibility: hidden is the right charm.

Fading transitions

For non-interactive elements needing animated transitions, combine visibility with opacity changes for smooth effects.

Beware!

Accessibility: Screen readers might still announce visibility: hidden content.
Interaction oversight: Elements with visibility: hidden can't receive focus, which may cause user experience issues.
Memory usage: display: none elements are excluded from rendering tree, which can save memory compared to visibility: hidden or opacity: 0 elements.