スマホでWebサイトを見るのが一般的になってきてから「アコーディオン」というものの使用頻度がすごく増えた気がします。
アコーディオンというのはクリック(タッチ)するとビヨーンって伸びるアレの事です。
使用する機会がとても高いのでこの機会にアコーディオン(jQuery)まとめてみました。
スポンサードリンク
アコーディオンを使う準備をする
ヘッダーでjQueryを読み込みます。そもそもjQueryとはなんなのかを説明すると…なんて今さらなので説明は省きますね。
とりあえずヘッダーの中に以下のような感じでjQueryを読み込んでください。
1 |
<script type="text/javascript" src="common/js/jquery-1.8.2.js"></script> |
※ローカル環境にjsファイルを設置しています。
アコーディオンはとっても簡単
実はあんまり説明する事もなかったりするんですよね…。
jQueryを使えば簡単すぎるぐらい簡単なんです。
htmlのヘッダー部分に記述
1 2 3 4 5 6 7 |
<script> $(function(){ $(".accordion dt").on("click", function() { $(this).next().slideToggle(); }); }); </script> |
html
1 2 3 4 5 6 7 8 |
<dl class="accordion"> <dt>アコーディオン1</dt> <dd>アコーディオンの中のテキスト1</dd> <dt>アコーディオン2</dt> <dd>アコーディオンの中のテキスト2</dd> <dt>アコーディオン3</dt> <dd>アコーディオンの中のテキスト3</dd> </dl> |
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.accordion dt{ color:#FFFFFF; background-color:#870000; display:block; width:100%; line-height:30px; text-align:center; cursor:pointer; border-bottom:1px solid #000000; } .accordion dd{ width:100%; line-height:30px; text-align:center; border:#666 1px solid; display:none; } |
まぁ、こんな感じでしょうか。
忘れがちなのは、ddの部分に最初「display:none;」と書いて非表示にする事ぐらいですかね。
最初非表示にしておいて、クリックすると表示されるといった感じです。
アコーディオンのオプション
あまりやれる事も多くないのですが、オプションもまとめておきます。
スピードの設定
開くスピードを設定できます。以下は3秒間かけて開閉します。ちなみにやってもらうとわかりますが、3秒はものすごく長くてイライラします(笑)通常は1秒(1000)か0.5秒(500)くらいでしょうかね。
htmlのヘッダー部分に記述
1 2 3 4 5 6 7 |
<script> $(function(){ $(".accordion dt").on("click", function() { $(this).next().slideToggle(3000); }); }); </script> |
イージングの設定
jQueryのイージングは正直あんまり効かない気がしているのですが、とりあえずswingとlinearは使えます。
htmlのヘッダー部分に記述
1 2 3 4 5 6 7 |
<script> $(function(){ $(".accordion dt").on("click", function() { $(this).next().slideToggle(2000,"swing"); }); }); </script> |
アコーディオンが完了した時にアクション
ありがちなものですが、完了した時にアクションを起こす事ができます。
htmlのヘッダー部分に記述
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(function(){ $(".accordion dt").on("click", function() { $(this).next().slideToggle(1000, comp); }); }); function comp(){ alert("OK"); }; </script> |
スマホで使用頻度の高いアコーディオン(jQuery)をまとめてみた まとめ
こんな所でしょうか。
アコーディオンはスマートフォンなどの横幅が小さい端末ではとっても良く使うので、忘れないようにまとめてみました。
意外とデフォルト状態でしか使った事がない人もいるようなので、この機会に少しいじって差をつけてみるのもいいのではないでしょうか。
スポンサードリンク