एकोर्डियन
एकैचोटि देखाउँदा धेरै लामो हुने लेखलाई शीर्षक मात्र देखाई, चाहिएको भाग खोलेर पढ्न दिने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<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; }कसरी प्रयोग गर्ने
- शीर्षक पढेरै भित्र के छ भन्ने अनुमान लाग्ने गरी लेख्नु
- पहिलो पटक आउने मान्छेले अनिवार्य पढ्नैपर्ने कुरा नलुकाउनु
- एकैचोटि एउटा मात्र खुल्ने बनाउन details मा एउटै name दिनु
ध्यान दिनुपर्ने कुरा
- div र click स्क्रिप्टले नबनाउनु, details/summary प्रयोग गर्नु — किबोर्ड र स्क्रिन रिडर आफैं चल्छ
- ब्राउजरको खोजीले पोको परेको लेख भेट्टाउँदैन; महत्त्वपूर्ण वाक्य बाहिर राख्नु