:LiSparkle: 特徴

• details/summary 利用
• 滑らかアニメーション
• 単一/複数展開
• a11y 対応

:LiCode: コード（コピペ用）

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>
  );
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

• 依存パッケージを忘れず追加