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

クリックするとコンテンツが出たり隠れたりするというのをjQueryのslideToggleで作ってみました。
slideToggleは出たり隠れたりする時の動作が上から下へ、下から上へと見栄えが良いです。
コンテンツを消すというよりも隠すという感じがします。

slideToggleとは

slideToggleはjQueryのエフェクトです。
slideToggleは指定された要素が表示されている時はslideUpで非表示にし、非表示になっている時はslideDownで表示します。

サンプル

jQueryのslideToggleを利用したコード

jQuery

<div><script type="text/javascript">
    jQuery(function(){
        jQuery(".contents, .btn2").hide();
        jQuery(".btn1").on("click", function() {
            jQuery(".contents, .btn1, .btn2").slideToggle();
        });
        jQuery(".btn2").on("click", function() {
            jQuery(".btn1").slideToggle(1000)
            jQuery(".btn2").slideToggle(2000)
            jQuery(".contents").slideToggle(3000);
        });
    });	
</script></div>

jQueryの解説

jQuery(“.contents, .btn2”).hide();
はjQueryで.contentsと.btn2を非表示にしています。

.hide()はjQueryのエフェクトで指定した要素を隠します。
隠した後はCSSのdisplay:noneになります。

jQuery(“.btn1”).on(“click”, function() {
は.btn1をクリックした時という事です。

jQuery(“.contents, .btn1, .btn2”).slideToggle();
は.contentsと .btn1と .btn2の要素に.slideToggle()を適用させるという事です。
ここで.slideToggle()の機能が活かされます。
.slideToggle()の機能は表示されている要素についてはslideUpで非表示にし、非表示になっている要素にはslideDownで表示させるというものです。
だからページを表示させた時にすでに表示されている.btn1についてはslideUpで非表示に、非表示になっている.contentsと .btn2についてはslideDownで表示させるという事です。
だから1行のjQueryの設定で足りるという事になります。

jQuery(“.btn2”).on(“click”, function() {
jQuery(“.btn1”).slideToggle(1000)
jQuery(“.btn2”).slideToggle(2000)
jQuery(“.contents”).slideToggle(3000);
は上までの説明内容とほぼ同じですが、.contents, .btn1, .btn2が変化する時間を各要素ごとに変えたので一つ一つわかりやすく設定してみました。
.slideToggleの変化時間は何も指定しないデフォルトの状態で400ミリ秒です。
つまり.btn2の要素をクリックした時に.contents, .btn1, .btn2の要素がバラバラの時間で変化していきます。

HTML

<div class="btn1">ここをクリックすると同じ速度でボタンが変わりコンテンツが出ます</div>
<div class="btn2">クリックするとボタンが元に戻りコンテンツが隠れます</div>
<div class="contents">コンテンツです。「クリックするとボタンが元に戻りコンテンツが隠れます」をクリックするとバラバラの速度で隠れます。</div>

CSS

サンプルにはCSSは設定していません。

まとめ

slideToggleはコンテンツなどを出したり隠したりする専用のエフェクトといっていいと思います。
何といっても動き方が良いのでslideToggleを利用することをお勧めします。

参考URL

slideToggleでハンバーガーメニュー | HaradaWeb(ハラダウェブ)
jQuery リファレンス：slideToggle
slideToggle([speed], [callback]) – jQuery 日本語リファレンス