<h2>Accessing a <code>`hidden`</code> element with JavaScript</h2>

<p>This page has a <code>&lt;textarea&gt;</code> with the Boolean <code>hidden</code> attribute present. Use the button below to display the innerHTML content for the element.</p>

<button id="btn">DISPLAY HIDDEN TEXT</button>

<output id="op">(Hidden text will appear here)</output>

<button id="btn2">TOGGLE HIDDEN ELEMENT</button><br>

<textarea id="h1" hidden rows="5" cols="40">This is the text of the hidden textarea element</textarea>

body {
  padding: 0 20px;
}

output {
  display: block;
  margin: 15px 0;
  font-weight: bold;
}

textarea {
  margin-top: 20px;
}

btn.addEventListener('click', function () {
  op.innerHTML = h1.innerHTML;
}, false);

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