Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal

Hide Elements with CSS

Just kidding. There are at least a few good reason to do it:

1. Animation and Effects: The visibility property can be used in conjunction with CSS animations and transitions. By hiding an element and then making it visible with a transition or animation, webmasters can create visually appealing effects and engage users with dynamic content.
2. Responsive Design: Webmasters may use the visibility property to control the appearance of elements on different screen sizes or devices. They can hide certain elements on smaller screens where they might not fit or may cause layout issues, ensuring a more optimized and responsive design. Almost guilty. Luckily I figured a way around the problem.
3. Accessibility: Hiding elements visually while still making them accessible to assistive technologies (e.g., screen readers) can be important for web accessibility. Webmasters may choose to hide certain elements visually, making them accessible to users who rely on assistive technologies to navigate and understand the content.

Anyway, moving along now...

In the display style tutorial I show how to change an element’s display property from block to inline and vice versa. One of the possible values for the display property is none. Using none as the value for the display property is one way to hide an element.

Another way to hide an element is to use the visibility property and setting the value to hidden. At first it may sound like display: none and visibility: hidden do the exact same thing, but there is a difference.

With display: none the page is displayed as if the element is not in the code at all. Other content shifts into the space the element would occupy if the display property was not changed.

With visibility: hidden the space the element would occupy under normal conditions is preserved, leaving a blank space in the page. See the illustration below for a visual reference.

In the accompanying image, Example A shows how three blocks of content would be displayed with the visibility set to hidden for block two. Block two is not visible to the user, but the position it occupies is preserved.

Example B shows how the same three blocks of content would be displayed with the display set to none for block two. As you can see, the content in block three has shifted up and is displayed in the same place that block two would normally occupy.

The following code shows how to hide a paragraph of text using the visibility property:

Here are the values that you may use with the visibility property:

visible | hidden | collapse | inherit

As you might guess, with the value set to visible the element would be displayed as normal. That’s the default value. Collapse is often used with tables to hide a row or column. Inherit, of course, inherits the property value from the parent element. Lastly, explode is not a legal value, which is why I didn’t include it in that list of values.

It would be kind of cool, though.