JavaScriptで作るトグル表示（アコーディオン）
クリックすると開閉できるFAQ風UIの作り方
👀 実行デモ
👇下の質問タイトルをクリックすると、内容が開閉します👇
❓ 質問１：これは何ですか？
これは、JavaScriptで制御されたアコーディオンUIです。タイトルをクリックすると、関連するコンテンツが表示されたり非表示になったりします。
❓ 質問２：どんな時に使えますか？
FAQ（よくある質問）、折りたたみ式のメニュー、詳細情報の表示など、多くの情報を整理して見せたい場合に非常に便利です。
📋 部分コード（HTMLとJavaScript）
この機能実装に最低限必要な、HTMLとJavaScriptのコードです。
※注：CSSは、これまでに作成した統合スタイルシート（`style.css`）に含まれる`.toggle-box`などのクラスを使用している前提です。
HTML構造
<!-- 1セット目 -->
<div class="toggle-box">
<div class="toggle-title">質問のタイトル１</div>
<div class="toggle-content">
<p>質問１の答えがここに入ります。</p>
</div>
</div>
<!-- 2セット目 -->
<div class="toggle-box">
<div class="toggle-title">質問のタイトル２</div>
<div class="toggle-content">
<p>質問２の答えがここに入ります。</p>
</div>
</div>JavaScript
document.querySelectorAll('.toggle-title').forEach(title => {
title.addEventListener('click', () => {
title.classList.toggle('active');
const content = title.nextElementSibling;
content.classList.toggle('open');
});
});💻 完全動作コード（HTMLファイル）
以下のコードをまるごとコピーして、`.html`形式で保存すれば、単体で動作を確認できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>トグル表示デモ</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 2rem auto; }
.toggle-box { border: 1px solid #ccc; margin-bottom: 1rem; padding: 1rem; border-radius: 8px; }
.toggle-title { cursor: pointer; font-weight: bold; position: relative; }
.toggle-title::after { content: '＋'; position: absolute; right: 0; }
.toggle-title.active::after { content: '−'; }
.toggle-content { display: none; margin-top: 1rem; border-top: 1px solid #eee; padding-top: 1rem; }
.toggle-content.open { display: block; }
</style>
</head>
<body>
<h1>FAQ</h1>
<div class="toggle-box">
<div class="toggle-title">質問１</div>
<div class="toggle-content"><p>答え１</p></div>
</div>
<div class="toggle-box">
<div class="toggle-title">質問２</div>
<div class="toggle-content"><p>答え２</p></div>
</div>
<script>
document.querySelectorAll('.toggle-title').forEach(title => {
title.addEventListener('click', () => {
title.classList.toggle('active');
const content = title.nextElementSibling;
content.classList.toggle('open');
});
});
</script>
</body>
</html>📘 解説とカスタマイズのポイント
このトグル表示テンプレートは、FAQやアコーディオンメニューの作成に便利な基本構造です。ですが、実務で使う際には「複数同時に開くと読みづらくなる」などのUX面の課題も出てきます。たとえば、開けるのは1つだけにしたい場合は、JavaScriptを少し変更して、他のコンテンツが開いているときは自動的に閉じるように処理を加えるのがオススメです。
また、アニメーションを付けて開閉をスムーズに見せると、さらに見た目が洗練されます。たとえばCSSの transition や max-height を使うことで、フェードやスライド効果も簡単に実装できます。