今回は、Webサイトでよく見かける「トグルリスト」を実装してみましょう。
この記事で学べること
クリックすると開閉するリスト形式のUIコンポーネント（色々な名称があると思いますが、ここではトグルリストと呼びます）の実装方法
コード詳細
See the Pen トグルリスト by toshihide (@toshihide2000) on CodePen.
（記事上では0.5xで見た方がいいかも）
今回は、こんなトグルリストを作ります
・クリックで開閉
・シンプルなCSSのみでアニメーション効果
・シンプルなJavaScriptで動作
それでは、実装方法を順番に見ていきましょう！
トグルリストの要件
このトグルリストに必要な機能を分解してみましょう：
・デフォルトでは全て閉じた状態
・各リストの見出しをクリックすると、リストが開閉。
・開閉時には「＋」「－」のアイコンが切り替わる
Cssの重要ポイント
style.css
.toggle-content { transition: max-height 0.3s ease, padding 0.3s ease; }max-heightとpaddingにトランジションを設定することで、開閉時にスムーズなアニメーションが実現できます。
style.css
.toggle-item:not(.closed) .toggle-content { max-height: 800px; padding: 15px 20px; } .toggle-item.closed .toggle-content { max-height: 0; padding: 0 20px; }closedクラスの有無によって、コンテンツ部分の高さと余白を調整しています。
JavaScriptの重要ポイント
トグルリストの開閉動作をJSで実装します。
main.js
document.addEventListener('DOMContentLoaded', () => { // すべてのトグルヘッダーを取得 const toggleHeaders = document.querySelectorAll('.toggle-header'); // 各ヘッダーにクリックイベントリスナーを追加 toggleHeaders.forEach(header => { header.addEventListener('click', () => { // 親要素（toggle-item）にclosedクラスを切り替え const toggleItem = header.parentElement; toggleItem.classList.toggle('closed'); // ボタンのテキストを更新 const button = header.querySelector('.toggle-button'); if (toggleItem.classList.contains('closed')) { button.textContent = '＋'; button.classList.remove('open'); button.classList.add('closed'); } else { button.textContent = '－'; button.classList.remove('closed'); button.classList.add('open'); } }); });
});💡ポイント
・すべてのトグルヘッダーに対して、クリックイベントリスナーを追加。
・クリックイベントで、クリックされたヘッダーの親要素（`toggle-item`）のclosedクラスを切り替える。
・ついでに「+」「-」の表示も切り替える。
トグルリストの実装はシンプルですが、Q&AなどWebサイト制作では頻出の重要なUIコンポーネントです。ぜひ自分なりにカスタマイズしてみてください！
