Akordeon

Untuk daftar panjang yang isinya jarang dibuka — misalnya rincian soal atau riwayat. Hanya satu atribut aria-expanded yang mengendalikan buka/tutup.

Akordeon dasar

Klik judul untuk membuka. Tanda panah berputar sendiri.

Soal 1 — Persamaan kuadrat

Akar-akar dari x² − 5x + 6 = 0 adalah 2 dan 3. Jawaban benar: B.

Soal 2 — Hukum Newton

Soal 3 — Reaksi redoks

Lihat kode

<div class="ck-accordion" style="max-width:38rem">
  <div class="ck-accordion__item">
    <button class="ck-accordion__trigger" data-ck-accordion aria-expanded="true" aria-controls="ac-1">Soal 1 — Persamaan kuadrat <span class="ck-accordion__chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></span></button>
    <div class="ck-accordion__panel" id="ac-1">Akar-akar dari x² − 5x + 6 = 0 adalah 2 dan 3. Jawaban benar: B.</div>
  </div>
  <div class="ck-accordion__item">
    <button class="ck-accordion__trigger" data-ck-accordion aria-expanded="false" aria-controls="ac-2">Soal 2 — Hukum Newton <span class="ck-accordion__chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></span></button>
    <div class="ck-accordion__panel" id="ac-2" hidden>Gaya aksi = reaksi. Jawaban benar: A.</div>
  </div>
  <div class="ck-accordion__item">
    <button class="ck-accordion__trigger" data-ck-accordion aria-expanded="false" aria-controls="ac-3">Soal 3 — Reaksi redoks <span class="ck-accordion__chevron"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 9 6 6 6-6"/></svg></span></button>
    <div class="ck-accordion__panel" id="ac-3" hidden>Oksidator menerima elektron. Jawaban benar: C.</div>
  </div>
</div>