Hide div but keep the empty space

html

responsive-design

css

javascript

byAnton Shumikhin·Feb 9, 2025

Preserve the space of a hidden <div> with the CSS visibility property:

.invisible {
  visibility: hidden; /* Now you see me, no wait you don't */
}

Apply this class to the <div>:

<div class="invisible">I'm invisible, but my space is here to stay!</div>

For interactivity, toggle visibility with jQuery:

$('.my-button-class').click(function() {
  $('.invisible').css('visibility', function(i, visibility) {
    return (visibility === 'visible') ? 'hidden' : 'visible'; /* Now you see me, now you don't! */
  });
});

Another crafty trick: opacity over visibility

Use the opacity property to make a div invisible, yet keep the text selectable:

.transparent {
   opacity: 0; /* I'm not gone, just very, very shy */
}

But wait, we don't want visible text-highlighting, no problem. Use user-select: none;:

.non-selectable {
  user-select: none; /* Hands off, please */
}

Combine both for an ultra-sneaky div:

<div class="transparent non-selectable">You can't see me, but you can still feel me.</div>

A deep dive into layout dynamics

The great debate: `visibility` vs `display`

In the CSS world, visibility: hidden hides an element but keeps its place in the layout. display: none, on the other hand, erase the element from the document flow, causing the space to collapse.

Play nice with others: interaction with sibling elements

An element with visibility: hidden still plays along with other elements — margins, padding, borders are all respected. Ergo, the space it occupies is fully preserved.

Smoother than a fresh jar of Skippy: transitions and animations

.smooth-transition {
  transition: visibility 0s, opacity 0.5s linear; /* I'm smooth, like butter on a bald monkey */
}

You can then toggle the classes via JavaScript for a cool fade effect:

$('.my-button-class').click(function() {
  $('.smooth-transition').toggleClass('invisible transparent');
});

Practical implementations

Dynamic content loaders

While loading dynamic content, use visibility: hidden to keep the layout stable. No more UI jumps as content populates.

Hidden triggers for user interactions

In gamified interfaces, hidden elements can act as secret triggers — the user triggers an interaction without even knowing it, magical!

Non-interactive info display

Use opacity: 0 if you need to keep informative text on the screen that's accessible to screen readers, but not visible to users.

Accessibility considerations

Combining visibility with opacity helps maintain decent accessibility standards while managing the visual presentation.

Navigating by keyboard

Preserve the tab order for accessibility by hiding non-relevant sections with visibility: hidden, without removing them completely from the document flow.