コピペで簡単！直ぐに作れるアコーディオンのサンプル
アコーディオンの作り方を解説していきます。
ほぼコピペで完成まで可能な様に作っていますので是非参考にしてくれましたら幸いです。
動作にはjqueryが必要となります。
まず最低限必要なHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="c-aco-wrap"> <p class="c-aco-button">ここをクリックで開く</p> <div class="c-aco-hidden"> <!-- ここにアコーディオン内のコンテンツを配置 --> <!-- ↓例 --> <ul> <li>・コンテンツああああ</li> <li>・コンテンツああああ</li> <li>・コンテンツああああ</li> <li>・コンテンツああああ</li> </ul> <!-- //例ここまで --> </div> </div> |
作りは単純で
「c-aco-button」をクリックしたら「c-aco-hidden」の高さを変更させる様に作っていきます。
今回は適当にリストを中に入れてますが基本的に何入れても動作します。
そして次はcss
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.c-aco-wrap{ .c-aco-button{ &:hover{ cursor: pointer; } } .c-aco-hidden{ overflow: hidden; transition: height 0.2s; height: 0; } } |
最低限の物だけ入力しています。
ポイントは「c-aco-hidden」に
overflow : hidden;
transition: height 0.2s;
height: 0;
で表示を隠した状態にします。
paddingやborderなどはc-aco-hiddenには付与しない様にしましょう。
アコーディオン自体を空中に浮かせたい場合はこれに
position: absolute;
あと必要な場合はwidthの設定を追加すると浮かせることができます。
ここまでできたらあとはjavascriptだけですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
(function ($) { /* アコーディオンテスト */ //初期設定 var $window = $(window), $cAcoButton = $('.c-aco-button'), $cAcoHidden = $('.c-aco-hidden'); //リサイズ処理 if ($cAcoHidden.length) { aco_resize(); $window.on('load resize', function () { aco_resize(); }); } function aco_resize() { $cAcoHidden.each(function () { var $this = $(this), nowHeight = $this.height(); $this.height('auto'); $this.data('initial-height', $this.height()); $this.height(nowHeight); }); } //ボタンクリック $cAcoButton.on('click', function () { var $this = $(this), $myAco = $this.closest('.c-aco-wrap'), $myHidden = $myAco.find('.c-aco-hidden'); $myAco.toggleClass('open'); if ($myAco.hasClass('open')) { $myHidden.height($myHidden.data('initial-height')); } else { $myHidden.height(0); } }); /* アコーディオンテストここまで */ })(jQuery); |
以上で設定完了です。
JavaScript