Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

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

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

画像出典:MDN

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

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

 

目次

デモ

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

See the Pen 【jQuery】クリックして要素の表示非表示を切り替える方法 by tak-kun (@tak-kun) 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;
}

JavaScript

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

ソースコードの解説

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

HTML

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

CSS

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

JavaScript

JavaScriptは当たり前ですがjQuery本体を読み込ませておき、要素(デモで説明するとclass="option")をクリックしたら、CSSで非表示にしてある要素(デモで説明するとclass="optionBox")をtoggleメソッドを使って表示させます。もう1度クリックすると表示された要素が非表示に切り替わります。

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