スマホでWebサイトを見るのが一般的になってきてから「アコーディオン」というものの使用頻度がすごく増えた気がします。
アコーディオンというのはクリック（タッチ）するとビヨーンって伸びるアレの事です。

使用する機会がとても高いのでこの機会にアコーディオン（jQuery）まとめてみました。

アコーディオンを使う準備をする

ヘッダーでjQueryを読み込みます。そもそもjQueryとはなんなのかを説明すると…なんて今さらなので説明は省きますね。
とりあえずヘッダーの中に以下のような感じでjQueryを読み込んでください。

※ローカル環境にjsファイルを設置しています。

アコーディオンはとっても簡単

実はあんまり説明する事もなかったりするんですよね…。
jQueryを使えば簡単すぎるぐらい簡単なんです。

htmlのヘッダー部分に記述

html

css

まぁ、こんな感じでしょうか。

忘れがちなのは、ddの部分に最初「display:none;」と書いて非表示にする事ぐらいですかね。
最初非表示にしておいて、クリックすると表示されるといった感じです。

アコーディオンのオプション

あまりやれる事も多くないのですが、オプションもまとめておきます。

スピードの設定

開くスピードを設定できます。以下は3秒間かけて開閉します。ちなみにやってもらうとわかりますが、3秒はものすごく長くてイライラします（笑）通常は1秒(1000)か0.5秒(500)くらいでしょうかね。

htmlのヘッダー部分に記述

 

イージングの設定

jQueryのイージングは正直あんまり効かない気がしているのですが、とりあえずswingとlinearは使えます。

htmlのヘッダー部分に記述

 

アコーディオンが完了した時にアクション

ありがちなものですが、完了した時にアクションを起こす事ができます。

htmlのヘッダー部分に記述

 

スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた　まとめ

こんな所でしょうか。

アコーディオンはスマートフォンなどの横幅が小さい端末ではとっても良く使うので、忘れないようにまとめてみました。
意外とデフォルト状態でしか使った事がない人もいるようなので、この機会に少しいじって差をつけてみるのもいいのではないでしょうか。