WEB
汎用的なアコーディオンの実装
2024.07.30
HTML、CSS、jQueryを使ってシンプルかつ機能的なアコーディオンを実装する方法を紹介します。
- #css
- #html
- #js
アコーディオンの完成系
アコーディオンは普段サイトを構築している上で、サイトに情報を整理して表示するための一般的なUIパターンですが、個人的ではありますがコンテンツを初期で非表示にしているUIはあまり使用しないようにしています。
ただ、Q＆Aページで項目が多くなった場合や、ピンポイントでそれほど重要度の高くない注釈など、場合によっては非常に有効な活用ができます。
どのようなレイアウトでもある程度カスタマイズができるようなアコーディオンの実装を考えてみます。
できるだけシンプルに且つ、開閉の状態が分かるようにアコーディオンを開いたら切り替わるアイコンを設置します。
また、jQueryを利用します。
See the Pen アコーディオンの実装 by perenote (@perenote) on CodePen.
今回作成するアコーディオンの解説
アコーディオン開閉用のボタンを用意する
アコーディオン用のボタンを用意します。
アイコンは :before :after を利用して設置しておきます。
<div class="c-acc">
<!-- ボタンを用意 -->
<p class="c-acc__head">アコーディオンボタン</p>
<div class="c-acc__cont">
<p>アコーディオンのコンテンツが入ります。</p>
</div>
</div>.c-acc{
margin-top: 10px;
.c-acc__head{
// 中略
position: relative;
&::before{
content: "";
background: #fff;
border-radius: 20px;
width: 20px;
height: 2px;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
&::after{
content: "";
background: #fff;
border-radius: 20px;
width: 2px;
height: 20px;
position: absolute;
top: 50%;
right: 30px;
transform: translate(50%, -50%);
transition: all .3s;
}
// 中略
}
}アコーディオンを開いた時のコンテンツボックスを用意する
アコーディオンのコンテンツを用意します。
コンテンツは初期状態では非表示なのでcssでdisplay:noneを指定しておきます。
<div class="c-acc">
<p class="c-acc__head">アコーディオンボタン</p>
<!-- アコーディオンのコンテンツを用意 -->
<div class="c-acc__cont">
<p>アコーディオンのコンテンツが入ります。</p>
</div>
</div>.c-acc__cont{
display: none; //初期の設定で非表示
font-size: 18px;
padding: 20px;
background: #ccc;
}js（jQuery）を利用して開閉させる
クリックをしたら隣り合う要素の表示・非表示を切り替えるようにします。
$('.c-acc__head').click(function(){
$(this).next('.c-acc__cont').slideToggle(); // 表示・非表示に切り替え
$(this).toggleClass("is-open"); // クラス付与でアイコン部分をcssでアニメーションさせる
});まとめ
以上で、HTML、CSS、jQueryを使用したシンプルなアコーディオンの実装が完了しました。この基本的なアコーディオンをもとに、さらにカスタマイズを加えて独自のスタイルや機能を追加してみてください。
特にコンテンツに関してはもっとリッチなコンテンツにしても対応が可能であり、複数設置しても他のアコーディオンには影響がないのでご活用ください。