CssHow-ToBeginner · 3 min read

How to Hide Element in CSS: Simple Methods Explained

To hide an element in CSS, use the display: none; property to remove it from the page layout completely. Alternatively, use visibility: hidden; to hide the element but keep its space reserved on the page.

📐

Syntax

Here are the main CSS properties to hide elements:

display: none; - hides the element and removes it from the page layout.
visibility: hidden; - hides the element but keeps its space on the page.
opacity: 0; - makes the element invisible but it still takes space and can respond to events.

css

/* Hide element completely */
display: none;

/* Hide element but keep space */
visibility: hidden;

/* Make element invisible but keep space and interactions */
opacity: 0;

💻

Example

This example shows a visible box and four buttons to hide it using different CSS properties and to show it again.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hide Element Example</title>
<style>
  #box {
    width: 150px;
    height: 150px;
    background-color: #4CAF50;
    margin-bottom: 10px;
    transition: all 0.5s ease;
  }
  .hidden-display {
    display: none;
  }
  .hidden-visibility {
    visibility: hidden;
  }
  .hidden-opacity {
    opacity: 0;
  }
</style>
</head>
<body>
  <div id="box"></div>
  <button onclick="hideDisplay()">Hide with display:none</button>
  <button onclick="hideVisibility()">Hide with visibility:hidden</button>
  <button onclick="hideOpacity()">Hide with opacity:0</button>
  <button onclick="showBox()">Show Box</button>

  <script>
    const box = document.getElementById('box');
    function hideDisplay() {
      box.className = 'hidden-display';
    }
    function hideVisibility() {
      box.className = 'hidden-visibility';
    }
    function hideOpacity() {
      box.className = 'hidden-opacity';
    }
    function showBox() {
      box.className = '';
    }
  </script>
</body>
</html>

Output

A green square box is visible above four buttons. Clicking each button hides the box differently: 'Hide with display:none' removes the box completely, 'Hide with visibility:hidden' hides the box but leaves empty space, 'Hide with opacity:0' makes the box invisible but it still occupies space. The 'Show Box' button makes the box visible again.

⚠️

Common Pitfalls

Here are some common mistakes when hiding elements in CSS:

Using visibility: hidden; when you want the element completely gone; it only hides visually but keeps space.
Using opacity: 0; to hide elements but forgetting it still responds to clicks and keyboard focus.
Not resetting styles properly when showing the element again, causing unexpected behavior.

css

/* Wrong: Using opacity to hide but element still clickable */
.hidden-opacity {
  opacity: 0;
}

/* Right: Use display:none to fully hide and disable interaction */
.hidden-display {
  display: none;
}

📊

Quick Reference

Property	Effect	Keeps Space?	Clickable?
display: none;	Element is removed from layout and hidden	No	No
visibility: hidden;	Element is hidden but space is reserved	Yes	No
opacity: 0;	Element is invisible but still in layout	Yes	Yes

✅

Key Takeaways

Use display: none; to completely hide an element and remove it from the page layout.

Use visibility: hidden; to hide an element but keep its space reserved.

Avoid using opacity: 0; to hide elements if you want to disable interaction.

Always reset styles properly when showing hidden elements again.

Choose the hiding method based on whether you want to keep space or disable interaction.