[hidden]

Elements with the [hidden] attribute are hidden by default. For <template> elements, see <template>.

Hidden Attribute

Content with hidden attribute is not displayed.

<p>This content is visible</p>
<p hidden>This content is hidden</p>
<p>This content is also visible</p>

Toggle Visibility

Hidden content can be shown by removing the attribute.

<div>
  <button onclick="document.getElementById('toggle-content').toggleAttribute('hidden')">
    Toggle Content
  </button>
  <p id="toggle-content" hidden>
    This content can be toggled visible and hidden!
  </p>
</div>