HTML hidden Property による要素の表示・非表示の切り替え

HTML hidden Property を利用した要素の非表示切り替えのコードを紹介します。

概要

CSSのdisplay プロパティや、visibility プロパティを利用することで要素の表示、非表示の切り替えができますが、HTML5ではさらにHiddenプロパティを利用して要素の表示、非表示を切り替えることができます。

プログラム

コード

下記のコードを記述します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <script type="text/javascript">
    function ChangeHidden() {
      var elem = document.getElementById('disp');
      if (elem.hidden == false) {
        elem.hidden = true;
      } else {
        elem.hidden = false;
      }
    }
  </script>
</head>
<body>
  <p>この行は表示されます。</p>
  <p id="disp">この行は非表示になります。</p>
  <p>この行は表示されます。</p>
  <a href="#" onclick="ChangeHidden();">表示切替</a>
</body>
</html>

解説

[表示切替]のリンクがクリックされると下記のコードが実行されます。

<script>
function ChangeHidden() {
  var elem = document.getElementById('disp');
  if (elem.hidden == false) {
    elem.hidden = true;
  } else {
    elem.hidden = false;
  }
}
</script>

getElementByIdメソッドにより、"disp"のIDの要素が取得されelem変数に格納されます。要素のhidden プロパティが false である場合は非表示になっているため、hiddenプロパティを"true"に設定し要素を表示状態にします。hiddenプロパティがfalseでない場合は要素が表示されている状態のため、hiddenプロパティを"false"に設定し要素を非表示の状態にします。