CSS Primer for Lightning Developers: Display and Visibility Properties for Showing and Hiding HTML Elements

The display and visibility CSS properties serve a number of purposes, but we are going to focus on a key use case for these properties: Hiding HTML elements on a page without having to use JavaScript to remove the elements from the Document Object Model (DOM).

Both display and visibility can be used to hide HTML elements, but the way in which they achieve this end is fundamentally different and can have an impact on the layout of your Lightning Components and Applications.

display:none and visibility:hidden

A common decision that developers have to make when using CSS to hide HTML elements is whether to use display:none or visibility:hidden.

What’s the difference between the two? Using the display:none declaration will hide an element from the page, and the page will remove the space that the element would have occupied if it was displayed. It’s as if the element never existed in the first place.

On the other hand, using visibility:hidden will also hide an element, but the space that the element takes up is preserved, leaving the layout of the page unchanged despite the fact that the element is not visible.

For example, to hide a <div> element from a component and collapse the space that it would have occupied in the layout:


div.hidden {

    display: none;

}

To hide the same <div> without collapsing the space that it would have occupied:


div.hidden {

    visibility: hidden;

}

Dynamically Showing or Hiding HTML Elements Using CSS and JavaScript

A common trick in Lightning development is to use JavaScript to add or remove CSS classes from HTML elements to show or hide them, which is why it is important to understand the difference between display:none and visibility:hidden.

In Lightning you would achieve this using one of three methods in the $A.Util class from the JavaScript API in your component Controller or Helper resource:

  • $A.Util.toggleClass – If a given CSS class is present, it is removed. If it is not present, it is added.
  • $A.Util.addClass – The specified CSS class is added to the HTML element; if the ‘class’ attribute is not already present on the HTML element, it is also added.
  • $A.Util.removeClass – Removes the specific CSS class from the HTML element.

You can also use the display:block property and value to override display:none, and you can use visibility:visible to override visibility:hidden.

slds-hide and slds-hidden

As an alternative to creating custom CSS rule sets, you can use the slds-hide and slds-hidden utility classes from the Salesforce Lightning Design System (SLDS).

The slds-hidden class selector applies visibility:hidden, and the slds-hide class selector applies display:none as illustrated here:


.slds-hidden {visibility:hidden}
.slds-visible {visibility:visible}
.slds-hide {display:none}
.slds-show {display:block}

Mike Topalovich

Hi, I’m Mike. I help companies like yours do business in new ways with Salesforce.


I am a freelance Salesforce Developer, Architect, and CTO as well as a part time instructor for Salesforce University.


Connect with me today to discuss how I can become a part of your team on an ongoing retainer basis.


Mike Topalovich on EmailMike Topalovich on FlickrMike Topalovich on LinkedinMike Topalovich on RssMike Topalovich on Twitter

Leave a Reply