CodePen Embed - HTML5's Global `hidden` Attribute

<h2>Global <code>`hidden`</code> Attribute</h2>

<p>This page has two elements with the Boolean <code>hidden</code> attribute present. Use the button below to toggle the <code>hidden</code> value.</p>

<button id="btn">TOGGLE HIDDEN ELEMENTS</button>

<p id="h1" hidden>This paragraph uses HTML5's <code>hidden</code> attribute.</p>

<textarea id="h2" hidden rows="5" cols="40">This textarea was hidden using the `hidden` attribute</textarea>

body {
  padding: 0 20px;
}

btn.addEventListener('click', function () {
  h1.hidden = !h1.hidden;
  h2.hidden = !h2.hidden;
}, false);

This Pen is owned by Louis Lazaris on CodePen.

See more by @impressivewebs on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.