jQueryでクリックすると表示・非表示を切り替えるtoggleを使った方法

jQueryを使って要素をクリックすると要素を表示したり、非表示にさせたりする方法について説明します。

jQueryを使って要素を表示・非表示させる方法はhideやshowメソッドを使うやり方などいくつか方法がありますが、今回はtoggle（トグル）メソッドを使ったやり方を紹介します。

デモ

まずはデモをご覧ください。

See the Pen 【jQuery】クリックして要素の表示非表示を切り替える方法 by ayukat (@ayukat) on CodePen.

HTML

<div class="option">クリックして</div>
<div class="optionBox">
  <p>テキストテキストテキストテキスト</p>
</div>

CSS

.option {
  padding: 10px 16px;
  width: 15px;
  margin: 20px auto;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.optionBox {
  display: none;
  position: absolute;
  top: 70px;
  right: 0;
  left: 0;
  width: 180px;
  margin: 0 auto;
  padding: 10px 20px;
  background: #fff;
  box-shadow: 2px 2px 10px rgba(44, 44, 44, 0.4);
}
.optionBox p {
  font-size: 13px;
  line-height: 1.6;
}

jQuery

$(function(){
  //クリックで要素を表示
  $('.option').click(function() {
    $('.optionBox').toggle();
  })
});

ソースコードの解説

ソースコードの解説をします。

HTML

HTMLはクリックする要素（デモで説明するとclass="option"）とクリックして表示・非表示させる要素（class="optionBox"）の2つを準備します。

CSS

CSSは適当にレイアウトを整えましたが、重要な点は表示・非表示させる要素はデフォルトでdisplay:noneで非表示にしておきます。

jQuery

jQuery本体を読み込ませておき、要素（デモで説明するとclass="option"）をクリックしたら、CSSで非表示にしてある要素（デモで説明するとclass="optionBox"）をtoggleメソッドを使って表示させます。

もう1度クリックすると表示された要素が非表示に切り替わります。

toggleメソッドは表示・非表示を切り替えることができるjQueryの便利なメソッドです。hideとshowが合体したメソッドと考えてください。