Hiding Elements: Display None vs Visibility Hidden

When you build web pages, there will be times you want to hide things: menus, popups, messages, or temporary content. Two very common CSS tools for this are display: none and visibility: hidden.

They sound similar, but they behave differently. Understanding this early will save you a lot of confusion and weird page layouts later.

In this beginner-friendly guide, you’ll learn:

What display: none does
What visibility: hidden does
How they affect page layout and screen readers (accessibility)
When to use each one with simple, hands-on examples

Don’t worry if you’re new to coding. We’ll go step by step, with short code examples you can copy, paste, and play with.

Basic Setup: HTML + CSS

We’ll use a very simple HTML structure. You can try this in:

A local file on your computer (saved as index.html), or
An online editor like CodePen, JSFiddle, or CodeSandbox.

Here’s a basic starting point:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hiding Elements Demo</title>
  <style>
    /* Simple styles so we can see each box clearly */
    .box {
      padding: 10px;
      margin: 5px 0;
      border: 2px solid #333;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <h1>Hiding Elements Demo</h1>

  <div class="box">Box 1: Always visible</div>
  <div class="box">Box 2: We will hide this</div>
  <div class="box">Box 3: Always visible</div>

</body>
</html>

What this does:

Creates three gray "boxes" stacked on top of each other
Adds borders and spacing so you can clearly see them

Open this in your browser. You should see Box 1, Box 2, and Box 3 all visible. We’ll now hide Box 2 in different ways.

What `display: none` Does

display: none completely removes the element from the page layout. It’s like the element is not there at all.

Add this CSS rule inside the <style> tag:

/* Hide box 2 completely */
.hide-display-none {
  display: none; /* Element is not displayed and takes up no space */
}

Now update your HTML to use that class on Box 2:

<div class="box">Box 1: Always visible</div>
<div class="box hide-display-none">Box 2: Hidden with display: none</div>
<div class="box">Box 3: Always visible</div>

Expected result in the browser:

You will only see Box 1 and Box 3.
Box 2 is gone, and there’s no empty space where it used to be.
Box 3 moves up as if Box 2 never existed.

This is very useful when you want to:

Hide a menu until the user clicks a button
Show or hide sections of a form
Remove elements from both layout and (often) from screen readers

Note: display: none usually hides elements from screen readers too, which can affect accessibility. That can be good or bad depending on what you want.

What `visibility: hidden` Does

visibility: hidden hides the element but keeps its space in the layout. The element is invisible, but the space it would normally take up is still reserved.

Add this CSS rule:

/* Hide box 2 but keep its space */
.hide-visibility-hidden {
  visibility: hidden; /* Element is invisible but still takes up space */
}

Now change Box 2 to use this new class instead:

<div class="box">Box 1: Always visible</div>
<div class="box hide-visibility-hidden">Box 2: Hidden with visibility: hidden</div>
<div class="box">Box 3: Always visible</div>

Expected result in the browser:

You will see Box 1.
Box 2’s gray box and text disappear, but you will see a gap where Box 2 used to be.
Box 3 stays below that gap.

This is helpful when:

You want to temporarily hide something but keep the layout from shifting
You’re making simple animations (for example, turning visibility on and off)

Important: With visibility: hidden, many screen readers may still be aware that the element exists (even though it’s not visible), depending on settings and context. It’s not as strong a "full hide" as display: none.

Side-by-Side Comparison

Let’s put both techniques into one example to clearly see the difference.

Replace your existing <body> with this:

<body>
  <h1>Display None vs Visibility Hidden</h1>

  <h2>Example with display: none</h2>
  <div class="box">Box A1: Visible</div>
  <div class="box hide-display-none">Box A2: Hidden (display: none)</div>
  <div class="box">Box A3: Visible (moves up)</div>

  <h2>Example with visibility: hidden</h2>
  <div class="box">Box B1: Visible</div>
  <div class="box hide-visibility-hidden">Box B2: Hidden (visibility: hidden)</div>
  <div class="box">Box B3: Visible (stays lower)</div>
</body>

Expected result:

In the display: none group, A2 disappears and A3 slides up.
In the visibility: hidden group, B2 disappears but leaves a blank space, so B3 stays in place.

This visual comparison makes the key difference very clear:

display: none → hidden and no space
visibility: hidden → hidden but space remains

Adding Interactivity with a Button

Now let’s make it interactive. We’ll create a button that shows and hides a message using display: none.

Step 1: Add HTML

Add this inside your <body>:

<h2>Toggle Message Example</h2>
<button id="toggle-btn">Show message</button>

<div id="message" class="box" style="display: none;">
  🎉 Surprise! This is a hidden message.
</div>

What this does:

Adds a button with the text "Show message"
Adds a box with a surprise message, initially hidden using display: none in the style attribute

Step 2: Add JavaScript

Right before the closing </body> tag, add:

<script>
  // Get references to the button and the message box
  const toggleBtn = document.getElementById('toggle-btn');
  const message = document.getElementById('message');

  // Listen for clicks on the button
  toggleBtn.addEventListener('click', function () {
    // Check the current display value of the message
    if (message.style.display === 'none') {
      // If hidden, show it
      message.style.display = 'block';
      toggleBtn.textContent = 'Hide message';
    } else {
      // If visible, hide it
      message.style.display = 'none';
      toggleBtn.textContent = 'Show message';
    }
  });
</script>

Expected behavior in the browser:

At first, the message is hidden.
Click "Show message": the box appears, and the button text changes to "Hide message".
Click "Hide message": the box disappears again and the button text goes back to "Show message".

This is a very common pattern on real websites. Menus, FAQ sections, and popups often use display: none exactly like this.

Try It Yourself: Switch to `visibility: hidden`

To see how visibility: hidden changes things, try this challenge:

Change the inline style on the message box:

<div id="message" class="box" style="visibility: hidden;">

Update the JavaScript logic to toggle visibility instead of display:

if (message.style.visibility === 'hidden') {
  message.style.visibility = 'visible';
  toggleBtn.textContent = 'Hide message';
} else {
  message.style.visibility = 'hidden';
  toggleBtn.textContent = 'Show message';
}

Refresh the page and try clicking the button again.

What you’ll notice:

The message area space is always there.
When hidden, the text and background vanish, but the space remains.
When visible, the message appears inside the same space.

This experiment will help make the difference between the two properties “stick” in your mind.

When to Use Which

Here’s a simple rule of thumb for beginners:

Use display: none when:

You want the element gone from the layout.
You’re toggling things on and off (like dropdown menus, tabs, modals).
You don’t want it announced by assistive technologies (in many cases).

Use visibility: hidden when:

You want to hide the element but keep its space.
You’re planning simple visibility-based effects without moving the layout.
You might want the element to still influence layout or transitions.

As you grow more comfortable, you’ll combine these with other CSS properties and accessibility techniques. For now, this simple mental model is enough.

Quick Recap

Let’s summarize the key points:

display: none removes the element from the layout. No space, usually not read by screen readers.
visibility: hidden hides the element but keeps its space in the layout.
Both can be toggled with JavaScript to show and hide content interactively.
Choose based on whether you want the layout to shift (display: none) or stay fixed (visibility: hidden).

If you followed along and got the examples working, that’s a big win. You just learned and practiced a concept that professional front-end developers use every day.

Next steps you can explore:

Play with more elements (images, buttons, paragraphs) and hide them in different ways.
Combine hiding with CSS transitions (fade in, fade out).
Learn about ARIA attributes (like aria-hidden) to manage how screen readers handle hidden content.

Keep experimenting. Each small project you try will make these ideas feel more natural and less mysterious.

Mudzinga

Hiding Elements: Display None vs Visibility Hidden

Basic Setup: HTML + CSS

What `display: none` Does

What `visibility: hidden` Does

Side-by-Side Comparison

Adding Interactivity with a Button

Step 1: Add HTML

Step 2: Add JavaScript

Try It Yourself: Switch to `visibility: hidden`

When to Use Which

Quick Recap

About Percy Mudzinga

Related Articles

Hiding Elements: Display None vs Visibility Hidden

Basic Setup: HTML + CSS

What display: none Does

What visibility: hidden Does

Side-by-Side Comparison

Adding Interactivity with a Button

Step 1: Add HTML

Step 2: Add JavaScript

Try It Yourself: Switch to visibility: hidden

When to Use Which

Quick Recap

About Percy Mudzinga

Related Articles

Never Miss an Update

What `display: none` Does

What `visibility: hidden` Does

Try It Yourself: Switch to `visibility: hidden`