アコーディオン Accordion
クリックでセクションの展開/折りたたみを切り替えるコンテンツ。FAQ等で定番。
ライブデモ
クリックでコンテンツの表示/非表示を切り替えるUIコンポーネントです。情報を整理してスペースを節約できます。
FAQ、設定画面、長い説明文の整理など、多くの情報をコンパクトに表示したい場面で使用します。
はい、CSSカスタムプロパティやJavaScriptのオプションで自由にカスタマイズできます。
ソースコード
<div class="demo-accordion">
<div class="demo-accordion-item open">
<button class="demo-accordion-header" aria-expanded="true">
<span>アコーディオンとは何ですか？</span>
<span class="demo-accordion-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</button>
<div class="demo-accordion-body">
<p>クリックでコンテンツの表示/非表示を切り替えるUIコンポーネントです。情報を整理してスペースを節約できます。</p>
</div>
</div>
<div class="demo-accordion-item">
<button class="demo-accordion-header" aria-expanded="false">
<span>どんな場面で使いますか？</span>
<span class="demo-accordion-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</button>
<div class="demo-accordion-body">
<p>FAQ、設定画面、長い説明文の整理など、多くの情報をコンパクトに表示したい場面で使用します。</p>
</div>
</div>
<div class="demo-accordion-item">
<button class="demo-accordion-header" aria-expanded="false">
<span>カスタマイズできますか？</span>
<span class="demo-accordion-icon">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
</span>
</button>
<div class="demo-accordion-body">
<p>はい、CSSカスタムプロパティやJavaScriptのオプションで自由にカスタマイズできます。</p>
</div>
</div>
</div>.demo-accordion { min-height: 320px; max-width: 480px; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }
.demo-accordion-item + .demo-accordion-item { border-top: 1px solid #e5e7eb; }
.demo-accordion-header {
display: flex; align-items: center; justify-content: space-between;
width: 100%; padding: 14px 18px; border: none; background: none;
font-size: 14px; font-weight: 600; color: #333; cursor: pointer;
text-align: left;
}
.demo-accordion-header:hover { color: var(--ui-primary); }
.demo-accordion-icon { transition: transform 0.3s; color: #999; flex-shrink: 0; }
.demo-accordion-item.open .demo-accordion-icon { transform: rotate(180deg); color: var(--ui-primary); }
.demo-accordion-body {
max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out;
}
.demo-accordion-item.open .demo-accordion-body { max-height: 200px; }
.demo-accordion-body p {
padding: 0 18px 14px; margin: 0; font-size: 13px; color: #666; line-height: 1.6;
}document.querySelectorAll('.demo-accordion-header').forEach(header => {
header.addEventListener('click', function() {
const item = this.closest('.demo-accordion-item');
const isOpen = item.classList.contains('open');
// Close all (single-open mode)
document.querySelectorAll('.demo-accordion-item').forEach(i => {
i.classList.remove('open');
i.querySelector('.demo-accordion-header').setAttribute('aria-expanded', 'false');
});
if (!isOpen) {
item.classList.add('open');
this.setAttribute('aria-expanded', 'true');
}
});
});AIプロンプト
Basic
アコーディオンをHTML/CSS/JSで作ってください。クリックでセクションが展開/折りたたみされるUIです。
Custom
以下の仕様でアコーディオンを実装してください。 - スムーズな展開/折りたたみアニメーション - プライマリカラー: #2563eb - 矢印アイコンの回転アニメーション - ボーダー + 角丸デザイン - 単一展開モード（1つ開くと他が閉じる） - アクティブ時のヘッダー色変更
Advanced
アクセシビリティ対応のアコーディオンを実装してください。 - <details>/<summary> または aria-expanded + aria-controls - キーボード操作（Enter/Space展開、上下キー移動、Home/End） - aria-disabled で無効化項目 - 複数展開/単一展開の切り替え - アニメーションはmax-heightではなくgrid-template-rowsで滑らかに - prefers-reduced-motion 対応 - ネストされたアコーディオン対応 - 動的にアイテムを追加/削除 - ディープリンク（URLハッシュで特定セクションを開く）