tooltip {

As a web developer, you‘ll often need to hide elements on a page. Whether you want to temporarily hide content, progressively disclose information, or create unique UI interactions, CSS provides several ways to make HTML elements disappear.

In this guide, we‘ll explore four key techniques for hiding HTML:

1. Hiding elements with visibility
2. Removing elements from the DOM with display
3. Fading elements with opacity
4. Shifting elements off-screen with absolute positioning

We‘ll dive into the nuts and bolts of each approach, looking at example code, use cases, and potential gotchas. By the end, you‘ll have a solid grasp of when and how to make HTML elements vanish.

Understanding the CSS Box Model

Before we jump into the tactics of hiding elements, let‘s take a step back and look at how elements are rendered on the page. Every element generates a rectangular box, which consists of four areas:

1. Content – the inner area where text, images, etc. appear
2. Padding – the space between the content and border
3. Border – a line surrounding the padding and content
4. Margin – the outer space surrounding the border

When you use CSS to hide an element, you‘re manipulating the box in some way – either by changing its visibility, removing it entirely, or shifting it out of view.

It‘s also important to understand that even hidden elements still exist in the DOM (Document Object Model). The DOM is the hierarchical structure of HTML elements that make up a web page. Hiding an element with CSS doesn‘t remove it from the DOM; it just changes how or if it‘s displayed visually.

With that context in mind, let‘s look at our first technique for making HTML disappear.

Technique #1: Hiding Elements with Visibility

The visibility CSS property allows you to hide an element while still maintaining its space on the page. Here‘s the basic syntax:

.hidden {
visibility: hidden;
}

Elements hidden with visibility:hidden are not visible, but still affect the page layout. Compare that to this default ruleset:

.visible {
visibility: visible;
}

Elements with visibility:visible (the default) will appear as normal. The visibility property accepts a few other values, like collapse for hiding table rows/columns, and inherit for matching parent visibility. But for most use cases, you‘ll toggle between visible and hidden.

One key use case for visibility:hidden is creating an accessible "skip to main content" link. Many websites hide this link by default but allow keyboard users to access it:

/ CSS /
.skip-link {
position: absolute;
top: -40px;
left: 0;
padding: 8px;
visibility: hidden;
}

.skip-link:focus {
top: 0;
visibility: visible;
}

With this CSS, the "skip to main content" link is initially positioned above the viewport with visibility:hidden. When a keyboard user tabs to the link, it gains focus and the :focus ruleset makes it visible and shifts it into view with top:0.

The visibility property is also useful for creating content panels that can expand/collapse. Vet your use case though; the display property may be a better choice, as we‘ll see next.

Technique #2: Removing Elements with Display

To completely remove an element from the page, use the display property:

.removed {
display: none;
}

An element with display:none will not be visible and won‘t take up any space on the page. It‘s as if the element doesn‘t exist for layout purposes (although it‘s still in the DOM).

You can think of display as a master switch for element boxes. Every element has a default display value, and switching to display:none will hide the element box and its children.

Via MDN

A common use case for display:none is hiding panels of content and allowing users to toggle their visibility. For instance, an FAQ where answers are initially hidden:

Clicking a question expands the corresponding answer (by setting it back to display:block). Progressive disclosure like this helps make content more scannable and allows users to jump to relevant information.

In general, use display:none if you want to completely remove an element and its space. Use visibility:hidden if you want to maintain the element‘s space but hide its contents visually.

Technique #3: Fading Elements with Opacity

For fading elements in or out, you can‘t beat the opacity property:

.faded {
opacity: 0.5;
}

Opacity accepts values from 0 to 1, with 0 being completely transparent (invisible) and 1 being completely opaque (solid). Values between 0 and 1 create semi-transparent elements.

Here are a few examples:

Via Codrops CSS Reference

A few things to note about opacity:

1. Child element opacity is multiplied by parent opacity. So an element with opacity:0.5 inside a parent with opacity:0.5 will have a computed opacity of 0.25.
2. Opacity affects the entire element box, including the background. For transparency effects on backgrounds only, consider using RGBA color or transparent PNGs.
3. When opacity is 0, elements are invisible but still take up space (similar to visibility:hidden).
4. Opacity plays well with transitions/animations, making it easy to fade elements in/out smoothly.

Common use cases for opacity include image hover effects, UI element states (e.g. disabled buttons at 50% opacity), and full-page overlay fades.

In this lightbox example, the full-page overlay has an opacity value that makes it slightly transparent, allowing the page content to subtly show through.

While opacity allows for cool fading effects, don‘t forget about accessibility. Ensure text maintains a contrast ratio of at least 4.5:1 with its background to comply with WCAG guidelines.

Technique #4: Shifting Elements Off-Screen

Our final technique hides elements by absolutely positioning them far outside the viewport:

.off-screen {
position: absolute;
left: -9999px;
}

Astronomically high negative values for left, top, right, or bottom can shift elements way off the visible page area. The exact value doesn‘t matter as long as it‘s a large negative number.

Elements hidden this way affect the page layout as if they weren‘t there (like display:none). However, they‘re still accessible to screen readers and other assistive tech — an important distinction.

Let‘s consider a nav menu. We want to provide a skip link as our first bit of focusable content:

/ CSS /
.skip-link {
position: absolute;
top: -800px;
left: 0;
}

.skip-link:focus {
top: 0;
}

Here the skip link is initially shifted 800px above the page. When focused via keyboard, it becomes visible by getting a top value of 0.

Why not use display:none? Because that would remove the skip link from the page entirely, making it inaccessible to screen readers or keyboard users.

In general, use the off-screen technique for content you want to be accessible but hidden visually. Just be sure to manage focus appropriately. When off-screen content gains focus, shift it back into the viewport so sighted keyboard users can see what they‘re interacting with.

Hiding Responsibly: Accessibility & Best Practices

When hiding content, it‘s important not to throw accessibility out the window. A few key things to keep in mind:

• Don‘t use display:none on focusable elements. This can prevent keyboard users from accessing that content.
• If you do use display:none, consider pairing it with a visibility:hidden fallback for older browsers.
• Use the off-screen technique for content that should be in the DOM and accessible, but hidden visually.
• Be careful not to hide content in a way that breaks the page for users who rely on assistive tech like screen readers, magnifiers, etc.
• WebAIM has a handy guide on hiding content accessibly.

Remember, there‘s a difference between hiding content visually and hiding it from assistive tech. In general, avoid using CSS to hide important content in a way that makes it inaccessible.

Hiding in the Wild: Real-World Examples

To bring it all home, let‘s look at a few real-world examples of hiding HTML with CSS.

Responsive Navigation

Many responsive nav menus will hide the underlying

on small screens and show a menu toggle button instead:


The nav menu is hidden with display:none (or translated off-screen) initially. When the user clicks the menu button, JavaScript adds/removes a class that controls the menu visibility. The menu then shows/hides using a smooth transition.

Progressive Disclosure

Similarly, accordions, tabs, and expandable "read more" links all rely on hiding HTML until the user takes an action:


The content of each accordion item is hidden with display:none. Clicking an item toggles its visibility, allowing users to drill into each section as needed. This technique follows the progressive disclosure design pattern for showing content gradually.

Tooltips & Popovers

Even humble tooltips often make use of visibility:hidden to hide their content until the user hovers:


We can make a simple tooltip with something like:

<button aria-describedby="tooltip">Hover me</button>
<div id="tooltip" role="tooltip">Tooltip content here</div>

/ CSS /

visibility: hidden;
position: absolute;
background: black;
color: white;
}

button:hover + #tooltip {
visibility: visible;
}

The tooltip content is wrapped in a

that‘s initially hidden. On hovering the sibling , the tooltip becomes visible. Throw in a bit of absolute positioning to make it float near the button, and you‘ve got an accessible tooltip.

Hiding in Plain Sight

As you can see, hiding HTML is a key skill for any front-end developer. Whether you‘re building responsive layouts, implementing progressive disclosure, or crafting clever UI interactions, a solid grasp of CSS hiding techniques will serve you well.

Just remember the key differences between each approach:

• visibility:hidden – hides content visually but maintains its space in the page layout
• display:none – hides content visually and removes its space
• opacity:0 – hides content visually but maintains its space (and allows for cool fading effects)
• off-screen absolute positioning – hides content visually but keeps it accessible to assistive tech

Each technique has its place. Choose the right tool for the job, prioritize accessibility, and your hidden HTML will be a UI enhancement rather than a usability hindrance.

Now you can confidently make any HTML element disappear — no magic wand required! Go forth and hide responsibly.

Related