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

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が合体したメソッドと考えてください。