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.

Teks dan pengaturan akordeon tetap berada di tab browser ini. Data tidak dikirim melalui Livewire, dimasukkan ke URL, atau diunggah. Menutup tab akan menghapus status funnel yang tersimpan.

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

Penghitung FPS

Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.

Konverter Base64 ke Hex

Konversi string Base64 menjadi byte dasarnya yang dinyatakan dalam heksadesimal (hex). Berguna untuk memeriksa token, kunci, sertifikat, dan JWT.

Konverter Biner ke Oktal

Konversi biner ke oktal dengan mengelompokkan bit tiga per tiga. Berguna untuk izin Unix, sistem lama, dan tampilan angka ringkas.

Konverter Biner ke ASCII

Tempel data biner (bita dipisah spasi atau aliran bit panjang) dan dapatkan teks ASCII yang diwakilinya. Mendukung pengodean 7-bit dan 8-bit.

Generator Warna Acak

Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.

Penyederhana Aljabar Boolean

Sederhanakan ekspresi Boolean memakai Karnaugh map dan algoritma Quine-McCluskey. Menampilkan setiap langkah minimisation dan bentuk SOP/POS akhir.