Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryTutorials and Answers

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

The "display" and "visibility" CSS Properties; An Overview

There are two ways to make content disappear and reappear.

One method shifts remaining content around to close up the area where content was made to disappear. Then it shifts around again to make room when the content reappears.

The other method leaves the space blank where the disappeared content had been. Then fills the space when the content reappears.

The two CSS properties are display or visibility.

Let's get right to the demonstrations.

Rectangular blocks like these will be used for demonstrating the two CSS properties. The red, green, and yellow blocks will be made to disappear and reappear.

1
2
3
4
5
6
7
8
9

Demonstrating the display Property —

Click the button to toggle the disappearance and reappearance of the red, green, and yellow blocks.

1
2
3
4
5
6
7
8
9

As you toggle the display property, making the red, green, and yellow blocks disappear, the rest of the blocks shift around to fill up the space thus vacated. And when it's toggled again, the blocks shift around to make room for the reappearing blocks.

Demonstrating the visibility Property —

Click the button to toggle the disappearance and reappearance of the red, green, and yellow blocks.

1
2
3
4
5
6
7
8
9

As you toggle the display property, making the red, green, and yellow blocks disappear, the space the disappeared blocks occupied remains blank. And when it's toggled again, the blocks reappear in the spaces they had vacated and were being kept open for their return.

When to Use Which

The use of the display property can be annoying if it's used a lot, especially if it's unanticipated. Every time something disappears or reappears, content is shifted around and the eye has to refocus on the page.

Yet, the display property is likely to be preferred for large areas of content — so the large areas don't remain blank when the content isn't published. Toggling the individual answers to questions on a Q&A or FAQ page, are examples. Suggestions or tips made available only on demand is another example.

The use of the visibility property is often preferred for small content items, where small vacant areas are acceptable and shifts in surrounding content are likely to dispense gratuitous annoyance. A submit button that disappears to prevent multiple clicking is an example. Once-sentence help is another.

The focus of this article is to provide demonstrations and an overview so you can make better informed choices for your web pages.

Techical details about display and visibility have been written about before in the Which to Use? display or visibility CSS Property article (Willmaster Library). It is a good resource for technical details about the two properties.

There is also A Short CSS 'display' Property Tutorial that focuses on the display property. The display property has many, many more options than the visibility property.

Much can be said about the two CSS properties. With this article and the two linked above, there is a lot of information.

(This article first appeared in Possibilities newsletter.)

Will Bontrager

Was this article helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method

All information in WillMaster Library articles is presented AS-IS.

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC