Softonic

Generator Akordeon CSS

Langkah 1 / 4 Konten

Konten akordeon

Masukkan judul dan isi panel sebagai teks biasa. Teks yang menyerupai HTML akan di-escape dalam kode hasil.

Buat akordeon tiga bagian dengan elemen semantik <details> dan <summary>. Sunting judul dan panel berupa teks biasa, atur desain dan cara buka, coba pratinjaunya, lalu salin kode atau unduh file HTML mandiri. Semua proses berlangsung di tab browser ini.

Cara membuat akordeon CSS

  1. 1

    Tulis tiga bagian

    Isi judul singkat dan teks panel untuk setiap bagian. Teks yang menyerupai HTML akan di-escape, bukan dijalankan.

  2. 2

    Atur desain

    Pilih empat warna enam digit, radius sudut 0 hingga 24 px, dan jarak dalam 8 hingga 32 px.

  3. 3

    Tentukan cara buka

    Izinkan beberapa panel terbuka atau gunakan atribut name bawaan agar hanya satu yang terbuka. Pilih chevron atau tanda plus/minus.

  4. 4

    Uji dan ekspor

    Coba pratinjau dengan penunjuk dan papan ketik, lalu salin kode atau unduh file HTML UTF-8.

Kode yang dihasilkan

Setiap bagian memakai elemen disclosure bawaan browser:

<details class="generated-accordion" open>
  <summary>Apa saja yang disertakan?</summary>
  <div class="generated-accordion__panel">Tambahkan detail di sini.</div>
</details>

CSS hasil mengatur garis tepi, latar judul, teks, fokus, jarak, sudut, dan ikon. Properti logis seperti margin-inline-start mendukung tata letak kanan-ke-kiri. Media query prefers-reduced-motion meniadakan transisi ikon bagi pengunjung yang mengurangi gerakan.

Beberapa panel atau satu panel

Pengaturan Markup hasil Perilaku
Beberapa panel Tanpa name bersama Setiap bagian dapat dibuka secara mandiri
Satu panel Semua memakai name="generated-accordion" Membuka satu bagian menutup bagian lain pada browser yang mendukung

Browser lama yang belum mendukung grup details eksklusif tetap menampilkan akordeon yang dapat dipakai, tetapi mungkin membiarkan beberapa panel terbuka.

Teks biasa yang aman

Judul dan panel diperlakukan sebagai teks. Karakter <, >, &, tanda kutip, dan apostrof di-escape dalam kode, sehingga tag yang ditempel tampil sebagai teks. Tambahkan tautan, daftar, atau markup tepercaya sendiri setelah ekspor jika diperlukan.

Pemeriksaan aksesibilitas

  • Gunakan Tab menuju setiap summary, lalu uji Enter dan Spasi.
  • Pastikan warna fokus cukup kontras dengan latar judul dan halaman.
  • Uji zoom, layar sempit, serta halaman kanan-ke-kiri.
  • Jangan sembunyikan petunjuk utama halaman di dalam panel tertutup.

Pertanyaan yang Sering Diajukan

Tidak. Proses buka dan tutup memakai perilaku bawaan <details> dan <summary>. File hasil hanya berisi HTML dan CSS.

Bisa. Pilih mode satu panel. Ketiga elemen <details> akan memakai atribut name yang sama; browser lama kembali ke panel mandiri.

Editor sengaja memperlakukan masukan sebagai teks biasa dan meng-escape karakter HTML. Tambahkan markup yang sudah ditinjau setelah ekspor bila diperlukan.

Tidak. Teks, pengaturan, pratinjau, salinan, dan unduhan tetap di browser. Dalam funnel, status sementara disimpan di sessionStorage tab saat ini dan tidak dimasukkan ke URL.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

Decoder JWT

Dekode header dan payload JWT, tampilkan klaim beserta pemeriksaan masa kedaluwarsa dan algoritma tanda tangan, lalu verifikasi menggunakan rahasia bersama atau kunci publik.

Alat ini tersedia dalam bahasa lain