Hiding Things Using CSS

by kirupa   |   26 January 2012

  Have questions? Discuss this HTML tutorial with others on the forums.

With CSS, we spend so much time talking about how you can use it to alter how things look, where they are positioned, and perform other visually constructive things. There is another side to CSS...a darker, more sinister side. The same CSS that drapes your elements in the finest of silks also has the ability to make them vanish into thin air.

In this tutorial, you will learn how to use CSS to make things disappear - to hide content on your page. Let's get started.

Meet Display, Visibility, and Opacity

As with all things in CSS, there isn't one way to do something as seemingly simple as hiding things on your page. You have three properties that sort of overlap in doing the same thing: display, visibility, and opacity.

In the following sections, you'll learn more about how each of these properties can be used to hide elements and how they affect layout when they are hidden. To help visualize this, we'll be using the following example:

example image

In our example, you have three elements represented by the colored squares. The elements are left aligned, so if there is space to fill, the elements will shift to the left.

Let's get started by looking at how our squares react at being hidden using the display property.

The Display Property

First up, you have the display CSS property. This property is used to define how your elements will lay themselves out. Given how broad the area of layout is, your display property can take a lot of values that each do something different. For the purposes of hiding content, though, the value we care about is none.

When you have a style rule that has the display property set to none, any elements you apply that rule to will be hidden. Below is an example of one such style rule:

.hideElement {
display: none;
}

If this rule is applied to our unhappy green square, the result looks as follows:

display none example 

[ the yellow square shamelessly takes up the space vacated by the green square ]

As expected, the green circle disappears. Notice what happens to the space where the green square originally was. The yellow square fills up the space the green circle originally took up.

A more fancy way of describing what happened is that your green square no longer participates in layout. Any layout operations will simply assume your green square simply doesn't exist.

Visibility Property

The next CSS property we will look at is called visibility. The visibility property, as its name implies controls whether an element is actually shown or not. The two values that are relevant are hidden and visible, but for this tutorial, we primarily care about the hidden value, so let's look at a rule that uses it:

.hideElement {
visibility: hidden;
}

If we apply this rule to our green square, the following will be the end result:

visibility is hidden

[ while you can't see the green square, it still takes up space ]

Just like with the display property earlier, the green square disappears. Unlike with what happened with the display property, though, notice what happened to the space occupied by the green square. That space is still occupied by the green square. It is not visible, but it still takes up space and participates in any layout shenanigans. As the kids on the Brady Bunch would say, "Groovy!"

The Opacity Property

The last property we are going to look at is opacity. The opacity property specifies how transparent an element you apply this property to is.

Unlike the narrow set of values you could use for the display and visibility properties, this property takes any decimal value between 0 and 1 where a value of 0 means that your element is invisible, and a value of 1 means that it is fully visible. Any value in-between puts the elements into a semi-transparent state.

To fully hide an element using opacity, set its value to 0:

.hideElement {
opacity: 0;
}

When using opacity to "hide" an element, the behavior is similar to what you would get with visibility: hidden:

visibility is hidden

[ the opacity property is clearly in cahoots with the visibility property ]

Notice that the green square still takes up space despite not being visible.

Which One to Use?

At this point, you've seen three CSS properties who, with the correct value, give you the desired effect of hiding whatever element you wish to hide! Given these three options, which one should you choose?

The answer is more simple than I make it out to be. If you want to hide your element and not have it take up space, use display: none. If you want to hide your element but continue having it take up space and participate in layout, then use visibility: hidden. And this brings us to the opacity property...

The opacity property may seem unnecessary. Why would you use something that is better served by visibility: hidden? Semantically, using the visibility property is clear as well. The only reason I would use opacity is if I want my element to be hidden as well as hit-testable where I can mess with it using my mouse. Hiding your content using display and visibility will make your content no longer hit-testable, so keep that in mind if being able to interact with the hidden elements using mouse/keyboard/touch events is important.

Conclusion

So there you have it...a quick look at how you can easily hide content. Remember that everything you've done involved using just CSS. What you have hidden is still represented in your markup/DOM. In order to actually remove the content, you'll have to use some JavaScript!

Think of it this way. Hiding elements using CSS is the equivalent of giving someone a cloak of invisibility. You cannot see them, but whoever is wearing that cloak is still there - paying attention to everything that is going on. If you feel creeped out at that thought, just think about how your HTML elements feel!

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!