アコーディオンパネルをhtmlで作成する

以前はjQueryで作るのが一般的でしたが、現在はhtmlのみで作成する事が出来ます。

<details>
<summary>
<h3>注文した商品はいつ届きますか。</h3>
</summary>
<div class="answer">
<p>神奈川県の配送センターより出荷し、ご注文日から2、3日前後でお届けいたします。</p>
</div>
</details>

使用するテキスト

返品・交換はできますか
室内での試し履き、化粧箱があれば返品・同商品のサイズ交換対応をしております。

注文した商品はいつ届きますか。
神奈川県の配送センターより出荷し、国内であればご注文日から2、3日前後でお届けいたします。

コンビニ受け取りはできますでしょうか。
当ストアではコンビニ受け取りサービスは行っておりません。

iOSで黒い三角マークを消すには特別なリセットが必要なので注意が必要です

summary{
list-style: none;/* 黒い三角形を消す */
}
summary::-webkit-details-marker {
display: none;/* iOS仕様 */
}

See the Pen
アコーディオン-htmlとcssだけで by yachin29 (@yachin29)
on CodePen.