Visibility

Utilities for controlling the visibility of an element in the DOM.

Class Name	CSS Equivalent
visible	visibility: visible;
invisible	visibility: hidden;
collapse	visibility: collapse;

Visible

The .visible class sets the visibility property to visible. This is the default visibility for an element in the normal flow of the document.

<div class="visible">
  <!-- Element with visible position -->
</div>

Invisible

The .invisible class sets the visibility property to hidden. It allows you to make an element invisible in the normal flow of the document, but the element still takes up space.

<div class="invisible">
  <!-- Element with invisible position -->
</div>

1

2

3

4

Collapse

Use collapse to hide table rows, row groups, columns, and column groups as if they were set to display: none, but without impacting the size of other rows and columns.

This makes it possible to dynamically toggle rows and columns without affecting the table layout.

<tr class="collapse">
  <!-- Element with collapsed position -->
</tr>

Showing all rows

	First name	Last name	Role
	Alice	Johnson	CEO
	Bob	Smith	Technical Advisor
	Charlie	Brown	CTO
	Diana	Miller	CFO

Hiding row 2 with collapse

	First name	Last name	Role
	Alice	Johnson	CEO
	Bob	Smith	Technical Advisor
	Charlie	Brown	CTO
	Diana	Miller	CFO

Hiding row 2 with hidden

	First name	Last name	Role
	Alice	Johnson	CEO
	Bob	Smith	Technical Advisor
	Charlie	Brown	CTO
	Diana	Miller	CFO