🚀 新規事業
accordion-component
最終更新 2026年05月09日 ／ 40_新規事業/SCALE_Build/カタログ/機能集/accordion-component.md
アコーディオン部品
用途
利用の純HTML軽量アコーディオン。アニメーション + 単一展開モード対応。
## 特徴
- details/summary 利用
- 滑らかアニメーション
- 単一/複数展開
- a11y 対応
## コード（コピペ用）
import { ReactNode } from 'react';
export function Accordion({ items, exclusive = false }: {
items: { title: string; content: ReactNode }[];
exclusive?: boolean; // true=同時に1つだけ
}) {
return (
<div>
{items.map((it, i) => (
<details key={i} name={exclusive ? 'accordion' : undefined}
style={{ borderBottom: '1px solid rgba(255,255,255,.07)', padding: '.85rem 0' }}>
<summary style={{
cursor: 'pointer',
fontFamily: 'serif',
fontSize: '.95rem',
color: '#fff',
listStyle: 'none',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}>
{it.title}
<span style={{ color: '#a5b4fc', transition: 'transform .25s' }}>+</span>
</summary>
<div style={{ marginTop: '.65rem', color: 'rgba(255,255,255,.55)', fontSize: '.8rem', lineHeight: 1.85 }}>
{it.content}
</div>
</details>
))}
</div>
);
}