អាកកូឌីយ៉ុង

សម្រាប់អត្ថបទវែងពេកបើបង្ហាញទាំងអស់ — បង្ហាញតែចំណងជើង ហើយឲ្យគេបើកតែអ្វីដែលត្រូវការ។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

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

របៀបប្រើ

សរសេរចំណងជើងឲ្យអ្នកអានដឹងមុនថាខាងក្នុងមានអ្វី
កុំបិទបាំងអ្វីដែលអ្នកមកដំបូងត្រូវអានឲ្យបាន
ដាក់ name ដូចគ្នាលើ details បើចង់ឲ្យបើកបានម្ដងមួយ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

សូមប្រើ details/summary មិនមែន div បូកស្គ្រីប click — ក្ដារចុចនិងកម្មវិធីអានអេក្រង់ដំណើរការស្រាប់
ការស្វែងរកក្នុងកម្មវិធីរុករកមិនឃើញអត្ថបទដែលបិទទេ ទុកប្រយោគសំខាន់នៅខាងក្រៅ

បន្ទាប់

ជួរបញ្ជី ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីការកំណត់ ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីកាត ការបង្ហាញព័ត៌មាន កម្មវិធី

សារពពុះ ការបង្ហាញព័ត៌មាន កម្មវិធី