HTML標準の<details>で作る開閉式FAQ。開閉ロジックはブラウザ任せで、CSSは見た目と「＋」印の回転だけを担当します。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
<details>と<summary>は、クリックでの開閉・Enterキー操作・open属性の管理をすべてブラウザが標準で行います。CSSの仕事は装飾だけです。標準の▶マーカーは summary の list-style: none（旧Safariは ::-webkit-details-marker）で消し、代わりに ::after の「＋」を配置。open状態で45度回転させると「×」に見え、閉じられることが伝わります。
開閉に高さのアニメーションを付けたい場合は、interpolate-size: allow-keywords と transitionの組み合わせが新しい定番です（対応ブラウザに注意）。
<details>と<summary>を使ったアコーディオン型FAQを作ってください。標準マーカーはlist-style: noneで消して::afterの「＋」に置き換え、open時に45度回転させてください。JSは使わないでください。