投稿日:2017年4月24日クリックするとコンテンツが出たり隠れたりするというのをjQueryのslideToggleで作ってみました。slideToggleは出たり隠れたりする時の動作が上から下へ、下から上へと見栄えが良いです。コンテンツを消すというよりも隠すという感じがします。参考URLslideToggleとはslideToggleはjQueryのエフェクトです。slideToggleは指定された要素が表示されている時はslideUpで非表示にし、非表示になっている時はslideDownで表示します。サンプルここをクリックすると同じ速度でボタンが変わりコンテンツが出ますクリックするとボタンが元に戻りコンテンツが隠れますコンテンツです。「クリックするとボタンが元に戻りコンテンツが隠れます」をクリックするとバラバラの速度で隠れます。.btn2”).hide();はjQueryで.contentsと.btn2を非表示にしています。.hide()はjQueryのエフェクトで指定した要素を隠します。隠した後はCSSのdisplay:noneになります。{は.btn1をクリックした時という事です。.btn2の要素に.slideToggle()を適用させるという事です。ここで.slideToggle()の機能が活かされます。.slideToggle()の機能は表示されている要素についてはslideUpで非表示にし、非表示になっている要素にはslideDownで表示させるというものです。.btn2についてはslideDownで表示させるという事です。1行のjQueryの設定で足りるという事になります。.btn2が変化する時間を各要素ごとに変えたので一つ一つわかりやすく設定してみました。.slideToggleの変化時間は何も指定しないデフォルトの状態で400ミリ秒です。.btn2の要素がバラバラの時間で変化していきます。class="contents">コンテンツです。「クリックするとボタンが元に戻りコンテンツが隠れます」をクリックするとバラバラの速度で隠れます。</div>CSSサンプルにはCSSは設定していません。まとめslideToggleはコンテンツなどを出したり隠したりする専用のエフェクトといっていいと思います。何といっても動き方が良いのでslideToggleを利用することをお勧めします。コメントをキャンセルコメントを投稿するにはログインしてください。