toggleClassでクリックするとコンテンツを出したり隠したりする簡単jQuery

ページ内の「ここをクリック」等と書いてあるところをクリックするとコンテンツが出てくるというものをちょくちょく見ます。
それを今回はjQueryのtoggleClassで作ってみました。
toggleClassはCSSのクラスを追加したり削除したりするので、CSSでdisplay: noneを設定して表示したり非表示にしたりする事でコンテンツを出したり隠したり、クリックする部分も変化させたりします。

toggleClassとは

CSSのクラスを対象としていて、引数に指定したクラスがなければ追加し、ある場合は削除するという機能があるjQueryの属性です。

サンプル

jQueryのtoggleClassを使ったコードと解説

jQueryコード

<div><script type="text/javascript">
jQuery(function () {
	jQuery(".dasu").click(function(){
		jQuery(".deiri").toggleClass("kakusu");
	})
});
</script></div>

jQueryのtoggleClassの解説

jQuery(“.dasu”).click(function(){
は.dasuの要素をクリックした時に、という事です。
この場合は<div class=”deiri dasu”>クリックするとコンテンツが出ます</div>と<div class=”deiri dasu kakusu”>クリックするとコンテンツが隠れます</div>に.dasuが設定されています。

jQuery(“.deiri”).toggleClass(“kakusu”);
は.deiriが設定されている要素すべてを対象として、.kakusuが設定されている要素には.kakusuを削除、設定されていない要素には設定する、という事です。

jQueryでこの動作をさせてCSSで隠したり出したりしています。
クリックすると「クリックするとコンテンツが出ます」に.kakusuのdisplay: none;が設定され、同時に「クリックするとコンテンツが隠れます」と「コンテンツ」から.kakusuのdisplay: none;が削除され、出てくるという仕組みです。

HTML

<div class="deiri dasu btn1">クリックするとコンテンツが出ます</div>
<div class="deiri dasu btn2 kakusu">クリックするとコンテンツが隠れます</div>
<div class="deiri conten kakusu">
「クリックするとコンテンツが出ます」をクリックすると非表示になり、「クリックするとコンテンツが隠れます」が表示されてこのコンテンツが表示されます。
表示された「クリックするとコンテンツが隠れます」をクリックすると、「クリックするとコンテンツが隠れます」とこのコンテンツは非表示になり、最初の「クリックするとコンテンツが出ます」が表示されます。
</div>

CSS

.kakusu {
    display: none;
}
.btn1 {
    border: 1px solid #f9f21a;
    background-color: aqua;
    border-radius: 5px;
    padding: 0.5rem;
}
.btn2 {
    border: 3px solid #ccc;
    background-color: antiquewhite;
    border-radius: 5px;
    padding: 0.5rem;
    margin-bottom: 1rem;
}
.conten {
    border: 3px solid #ccc;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: azure;
}

まとめ

toggleClassというのはCSSのクラスを追加したり削除したりするもので要素を出したり隠したりする専用のものではありません。
今回はjQueryの記述が少なくわかりやすいと思ったので紹介してみました。

toggleClassの機能は応用すれば他にもいろいろ使えます。
CSSクラスを設定して、文字を大きくしたり、画像を拡大させたり、色を変えたり。
うまく使えば面白いサイトが作れます。

参考URL

toggleClass(class) – jQuery 日本語リファレンス
jQuery リファレンス：toggleClass