Akordeon
Untuk teks yang terlalu panjang bila dibentangkan sekaligus — tampilkan judulnya, biarkan orang membuka yang mereka perlukan.
Pratinjau langsung
Sumber
<div class="dc-acc">
<details class="dc-acc__item" open>
<summary class="dc-acc__head">
<span class="dc-acc__title">배송은 얼마나 걸리나요?</span>
<span class="dc-acc__sign" aria-hidden="true"></span>
</summary>
<div class="dc-acc__body">
<p class="dc-acc__text">결제가 확인된 뒤 평일 기준 2~3일 안에 받으실 수 있습니다. 주말과 공휴일에는 배송이 쉽니다.</p>
</div>
</details>
<details class="dc-acc__item">
<summary class="dc-acc__head">
<span class="dc-acc__title">반품 비용은 누가 내나요?</span>
<span class="dc-acc__sign" aria-hidden="true"></span>
</summary>
<div class="dc-acc__body">
<p class="dc-acc__text">상품에 문제가 있으면 저희가 냅니다. 단순 변심이면 왕복 배송비 5,000원이 환불 금액에서 빠집니다.</p>
</div>
</details>
<details class="dc-acc__item">
<summary class="dc-acc__head">
<span class="dc-acc__title">영수증을 다시 받을 수 있나요?</span>
<span class="dc-acc__sign" aria-hidden="true"></span>
</summary>
<div class="dc-acc__body">
<p class="dc-acc__text">주문 내역에서 언제든 다시 내려받을 수 있습니다. 사업자 지출 증빙으로 바꾸는 것도 같은 자리에서 됩니다.</p>
</div>
</details>
</div>.dc-acc { border:1px solid var(--dc-line); border-radius:var(--dc-r-md); background:var(--dc-surface); overflow:hidden; font-family:var(--dc-font); }
.dc-acc__item + .dc-acc__item { border-top:1px solid var(--dc-line); }
.dc-acc__head { display:flex; align-items:center; gap:var(--dc-3); min-height:52px; padding:var(--dc-3) var(--dc-4); list-style:none; cursor:pointer; color:var(--dc-text); font-size:15px; font-weight:600; }
.dc-acc__head::-webkit-details-marker { display:none; }
.dc-acc__head:hover { background:var(--dc-sunken); }
.dc-acc__title { flex:1 1 auto; min-width:0; }
.dc-acc__sign { position:relative; flex:0 0 auto; width:20px; height:20px; color:var(--dc-text-sub); }
.dc-acc__sign::before, .dc-acc__sign::after { content:""; position:absolute; top:9px; left:3px; width:14px; height:2px; border-radius:var(--dc-r-full); background:currentColor; transition:transform var(--dc-fast); }
.dc-acc__sign::after { transform:rotate(90deg); }
.dc-acc__item[open] .dc-acc__sign::after { transform:rotate(0deg); }
.dc-acc__body { padding:0 var(--dc-4) var(--dc-4); }
.dc-acc__text { margin:0; color:var(--dc-text-sub); font-size:14px; line-height:1.7; }
.dc-acc--flush { border:0; border-radius:0; background:none; }
.dc-acc--flush .dc-acc__item { border-top-color:var(--dc-line); }
.dc-acc--flush .dc-acc__head { padding-left:0; padding-right:0; }
.dc-acc--flush .dc-acc__head:hover { background:none; color:var(--dc-brand-text); }
.dc-acc--flush .dc-acc__body { padding-left:0; padding-right:0; }Cara memakainya
- Tulis judul yang sudah memberi tahu isinya sebelum dibuka
- Jangan melipat hal yang wajib dibaca pengunjung pertama kali
- Beri name yang sama pada details kalau hanya satu yang boleh terbuka
Hal yang perlu diwaspadai
- Bangun dari details/summary, bukan div dengan click handler — papan ketik dan pembaca layar langsung bekerja
- Pencarian peramban tidak menemukan teks yang terlipat, jadi sisakan kalimat pentingnya di luar