W3.CSS Visibility

Hide an Element

Use w3-hide to hide an element.

The class sets display:none, so the hidden element takes up no space in the layout.

Panel 2 is hidden below, so Panel 3 follows Panel 1.

Show an Element

Use w3-show to display an element as a block.

A block starts on a new line and normally fills the available width of its parent.

In this example, w3-show makes the second panel visible even though it also has w3-hide.

w3-show-block

The w3-show-block class is another name for w3-show.

Both classes set display:block and produce the same result.

Show an Inline Block

Use w3-show-inline-block when the element should appear within a line of text.

An inline block normally uses only the width its content needs and can sit beside other content.

The label below is revealed beside the word Status.

Toggle Visibility

Use a button and a little JavaScript to show or hide extra content.

Click the button to reveal the details panel, then click it again to hide the panel.

<button class="w3-button w3-teal" onclick="toggleVisibilityDemo(this)">Show or hide details</button>

<div id="visibilityDemo" class="w3-panel w3-pale-blue w3-hide">
  <h3>More Details</h3>
  <p>This panel is now visible.</p>
</div>

<p>This paragraph moves down when the panel appears.</p>

<script>
function toggleVisibilityDemo(button) {
  const panel = document.getElementById("visibilityDemo");
  const isVisible = panel.classList.toggle("w3-show");
  button.setAttribute("aria-expanded", isVisible);
}
</script>

The panel starts with w3-hide.

The classList.toggle() method adds w3-show if it is missing and removes it if it is present.

The button's aria-expanded value is updated so assistive technology can announce whether the panel is expanded.

Responsive Visibility

Use the responsive hide classes to hide content at different screen widths.

These classes respond to viewport changes automatically, without JavaScript.

The breakpoints use the browser viewport width.

In Tryit, this is the width of the result area.

Resize the window or result area to see which panel disappears.

<div class="w3-panel w3-pale-blue w3-hide-small">
  <p>Hidden on small screens: 600px or less.</p>
</div>
<div class="w3-panel w3-pale-green w3-hide-medium">
  <p>Hidden on medium screens: 601px to 992px.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-hide-large">
  <p>Hidden on large screens: 993px or more.</p>
</div>

Show Content in One Screen Range

Combine two responsive hide classes to show content only in the remaining screen-width range.

For example, w3-hide-medium w3-hide-large hides an element on medium and large screens, so it appears only on small screens.

Only one of these panels is visible in each range.

<div class="w3-panel w3-pale-blue w3-hide-medium w3-hide-large">
  <p>Shown only on small screens.</p>
</div>
<div class="w3-panel w3-pale-green w3-hide-small w3-hide-large">
  <p>Shown only on medium screens.</p>
</div>
<div class="w3-panel w3-pale-yellow w3-hide-small w3-hide-medium">
  <p>Shown only on large screens.</p>
</div>

Visibility Classes