No Login Data Private Local Save

CSS visibility & display Demo - Online Show/Hide Effects

19
0
0
0

CSS Visibility & Display Demo

Interactively explore how display, visibility, and opacity affect element rendering, layout space, and transitions.

Live Layout Stage Flex Row
Target Width: 70px display: flex

The golden box is the target. Watch how other boxes react when you change its properties.

A
B
★
D
E
Property Controls
Current Combined State: display: flex; visibility: visible; opacity: 1;
display: none Fully Removed

Element is removed from the render tree entirely. No space is reserved. Surrounding elements collapse into the gap.

No transitions Hidden from screen readers Not in layout
visibility: hidden Invisible but Present

Element is invisible but space is reserved. Layout remains unchanged. Surrounding elements stay in place.

Supports transitions* Hidden from screen readers In layout flow
opacity: 0 Transparent & Interactive

Element is fully transparent but still occupies space and receives pointer events (clicks, hovers).

Smooth transitions Still clickable In layout flow
visibility: collapse Table Row/Col Collapse

For table rows/columns: behaves like display:none. For other elements: behaves like visibility:hidden.

Table-specific Removes row space
visibility: collapse — Table Row Demo

visibility: collapse on a table row removes it from layout (like display:none). visibility: hidden hides it but keeps the row space. See the difference below.

# Product Category Price
1 Wireless Mouse Electronics $29.99
2 Mechanical Keyboard Electronics $89.99
3 USB-C Hub Accessories $45.00
Row 2: visible (default)
Pro Tip: Smooth Hide/Show Animations

display cannot be animated with CSS transitions. To achieve smooth hide effects, combine opacity + visibility with a transition delay. Example:
transition: opacity 0.3s, visibility 0s 0.3s; — this delays the visibility change until opacity finishes, creating a smooth fade-out.

Frequently Asked Questions

Q: What's the main difference between display:none and visibility:hidden?

display:none removes the element from the layout entirely — no space is reserved, and surrounding elements fill the gap. visibility:hidden makes the element invisible but it still occupies its original space in the layout. Think of display:none as "demolishing" the element, and visibility:hidden as "cloaking" it.

Q: When should I use visibility:hidden instead of display:none?

Use visibility:hidden when you need to preserve layout stability — for example, tooltip placeholders, tab panel content that shouldn't cause layout shifts, or animated show/hide where maintaining the element's footprint prevents jarring jumps. Use display:none for responsive menus, conditional content sections, or when you genuinely want to reclaim the space.

Q: Does display:none affect SEO?

Yes — search engines may devalue or ignore content hidden with display:none, especially if it appears manipulative (e.g., keyword stuffing). Content hidden with visibility:hidden or opacity:0 may also be scrutinized. For legitimate hidden content (like accordions), modern search engines generally understand progressive disclosure patterns. Always use semantic HTML and avoid hiding large amounts of text purely for ranking purposes.

Q: How do screen readers handle these properties?

Both display:none and visibility:hidden remove the element from the accessibility tree, meaning screen readers cannot access that content. opacity:0 alone does not hide content from screen readers. For visually hidden but screen-reader-accessible content, use the .visually-hidden (Bootstrap) or sr-only pattern with clip/position techniques.

Q: Can I animate display:none with CSS transitions?

No — display is a discrete property and cannot be interpolated. Modern CSS introduces transition-behavior: allow-discrete (Chrome 117+) and @starting-style to enable entry animations, but support is still limited. The battle-tested approach: use opacity + visibility transitions, then optionally set display:none via JavaScript after the transition completes.

Q: What is visibility:collapse used for?

visibility:collapse is specifically designed for table rows (<tr>), row groups, columns, and column groups. When applied to a table row, it removes the row from layout (like display:none) but allows the row to be restored without complete re-render. On non-table elements, it behaves exactly like visibility:hidden. This dual behavior makes it unique and table-specific.

Q: Does opacity:0 make an element non-interactive?

No — an element with opacity:0 is still fully interactive. Users can accidentally click on invisible buttons, and hover states still trigger. To prevent interaction, pair it with pointer-events: none. This combination is commonly used for fade-out animations where you want both visual and interactive removal.

Q: What's the performance difference between these hiding methods?

display:none triggers a full layout recalculation (reflow) because elements shift. visibility:hidden only triggers a repaint — no reflow needed since layout doesn't change. opacity changes are handled by the compositor in modern browsers (no reflow, minimal repaint). For performance-critical animations, prefer opacity and transforms over display toggling.

Quick Reference: Hidden Element Comparison
Property Space Reserved? Transitionable? Screen Reader Access? Receives Clicks? Triggers Reflow?
display: none No No No No Yes
visibility: hidden Yes Limited* No No No
visibility: collapse (table) No Limited* No No Yes
opacity: 0 Yes Yes Yes Yes No
opacity: 0 + pointer-events: none Yes Yes Yes No No

* visibility transitions work with transition-behavior: allow-discrete in modern browsers, or when combined with opacity.

🔧 Related Tools