Akordeon CSS banyak digunakan untuk menu, cuplikan, gambar, video, FAQ, daftar, dan kutipan artikel yang dapat diperluas dan dilipat. Anda dapat dengan mudah membuatnya menggunakan HTML, CSS, dan JavaScript (atau jQuery). Membuat akordeon khusus CSS adalah sedikit tugas yang menantang, tetapi ini sangat membantu di lingkungan yang dinonaktifkan JavaScript.

Dalam panduan ini, Anda akan mempelajari pendekatan langkah demi langkah untuk membuat akordeon khusus CSS.

Membangun Akordeon Dasar Hanya Menggunakan HTML

Jika prioritas Anda adalah membuat akordeon yang dapat diakses menggunakan HTML, dan tag adalah cara untuk pergi. Tidak masalah bahasa pemrograman mana yang Anda gunakan, akordeon khusus HTML akan tetap utuh. Membuat tag sebagai orang tua dan masukkan pertanyaan di a menandai. Tulis jawaban deskriptif di dalam a menandai. Ulangi proses untuk sejumlah FAQ.

FAQ 1



Lorem ipsum dolor, sit amet consectetur adipisicing elit. Alasan adipisci illum error, hic expedita numquam impedit explicabo vitae iure quae vero autem quia quibusdam tempora atque harum perferendis praesentium dolor!









instagram viewer



FAQ 2



Consequuntur earum pariatur dolorem repellat temporibus ducimus sunt suscipit repudiandae cupiditate in accusantium recusandae tempora sint eligendi, perferendis aspernatur architecto voluptas laborum adipisci neque voluptates konsekuensi. 






FAQ 3



Tenetur, ex delectus, perferendis aperiam voluptatem consequuntur molestiae ratione rerum vitae ab modi, minus placeat quis dignissimos. Dolorem quaerat odit, iusto laboriosam possimus, in architecto aliquam commodi sapiente saepe sequi at eligendi hic reprehenderit repellendus quos!

Menata Akordeon

Anda dapat menata akordeon dengan menyesuaikan warna latar belakang, radius batas, batas, lapisan, dll.

tubuh {
 font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Jenewa, Verdana, sans-serif;
 lebar maksimum: 30rem;
 margin: 1.5rem otomatis;
}
Ringkasan {
 font-berat: 600;
 warna: rgb (255, 255, 255);
 warna latar: rgb (7, 185, 255);
 bantalan: 1.2rem;
 margin-bawah: 1.2rem;
 batas-radius: 0.5rem;
 kursor: penunjuk;
}

Keluaran:

Satu-satunya batasan adalah Anda tidak akan memiliki kendali atas setiap bagian kode. Struktur HTML dapat dimodifikasi, tetapi Anda tidak dapat membuat akordeon khusus. Oleh karena itu, mari buat bagian FAQ khusus menggunakan CSS tingkat lanjut.

Bangun Bagian FAQ Kustom Anda

Ada dua metode populer untuk membuat akordeon khusus CSS. Anda dapat menggunakan kotak centang atau tombol radio; kami akan menjelaskan kedua metode tersebut.

Menggunakan Metode Kotak Centang

Metode Kotak Centang menggunakan kotak centang sebagai tipe masukan. Setiap kali pengguna memilih tab, mereka menandai kotak centang dan itu terbuka. Anda dapat membuka banyak tab secara bersamaan menggunakan Metode Kotak Centang, mirip dengan cara Anda menandai lebih dari satu kotak centang di dalam bentuk HTML.

HTML

Akordeon Khusus CSS Saja (FAQ)

Menggunakan metode Kotak Centang






Bagaimana cara membuat akordeon khusus menggunakan CSS saja?


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum debitis voluptas aliquid tenetur quas suscipit
 asumsikan a, nesciunt eum nobis eaque, exercitationem differentio alias ullam quia. Rusak beatae
 keharusan nihil.









Bagaimana cara mengubah ketinggian elemen semu?


 Temporibus vel dolore nam dolorem similique voluptatum. Aliquam, dolor et! Tempore mollitia voluptatibus
 ducimus exceptionuri doloribus aliquam ipsum vel, accusantium quo nemo expedita esse eos libero insiden
 reprehenderit facere ex hic ipsa odit in! malam.

CSS Umum

Terapkan CSS dasar ke tubuh.

tubuh {
 warna: #502c2c;
 latar belakang: #f1edec;
 bantalan: 1.2rem;
 font-family: 'Segoe UI', Tahoma, Jenewa, Verdana, sans-serif;
 lebar maksimum: 45rem;
 margin: 0 otomatis;
 ukuran font: 1.2rem;
}

Menata Akordeon

Pertama, sembunyikan kotak centang dengan memodifikasi input.

/* Menyembunyikan kotak centang atau tombol radio*/
memasukkan {
 posisi: mutlak;
 opasitas: 0;
 indeks-z: -1;
}

Sekarang, gaya akordeon. Anda dapat menambahkan::setelah elemen semu untuk + tanda. Anda dapat merujuk ke Bagan Referensi Entitas Karakter dan gunakan apa saja Kalkulator Konversi Entitas untuk menemukan Nilai CSS dari Nilai Numerik. Di sini, Nilai CSS dari + adalah \002B.

/* Gaya akordeon */
.faq {
 warna: #ffe3e3;
 margin-bawah: 3rem;
}
.faq-label {
 ukuran font: 1.5rem;
 tampilan: fleksibel;
 align-item: tengah;
 justify-content: ruang-antara;
 bantalan: 1em;
 latar belakang: #b61818;
 font-berat: tebal;
 kursor: penunjuk;
 pilihan pengguna: tidak ada;
}
.faq-label:: setelah {
 konten: '\002B';
 bantalan: 0.51rem;
 transformasi: skala (1,8);
 perataan teks: tengah;
 transisi: semua 0,35 detik;
}
.faq-konten {
 tinggi maksimum: 0;
 bantalan: 0 1em;
 warna: #2c3e50;
 latar belakang: putih;
 transisi: semua 0,35 detik;
 tampilan: tidak ada;
}

Sekarang, mari tambahkan fungsionalitas ke akordeon menggunakan berdekatan dan penyeleksi atribut. Di Sini, \2013 adalah Nilai CSS untuk –, Nilai Numerik yang mewakili –.

masukan: dicentang + .faq-label {
 latar belakang: #8f1414;
}
input: dicentang + .faq-label:: after {
 konten: '\2013';
 mengubah: skala (1.5);
}
masukan: dicentang ~ .faq-content {
 tinggi maksimum: 100vh;
 bantalan: 1em;
 tampilan: blok;
 transisi: semua 0,35 detik;
}

Keluaran:

Menggunakan Metode Tombol Radio

Metode Tombol Radio memiliki tipe input yang disetel ke radio. Setiap kali pengguna mengklik tab, tombol radio tersembunyi yang sesuai dengan tab itu terbuka. Saat Anda mengklik tab berikutnya, tab sebelumnya langsung tertutup. Anda hanya dapat membuka satu tab dalam satu waktu menggunakan Metode Tombol Radio.

HTML

Akordeon Khusus CSS Saja (FAQ)

Menggunakan metode Tombol Radio






Bagaimana cara membuat akordeon menggunakan metode Tombol Radio?


 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus maiores quisquam atque dicta eum numquam necessitatibus, nisi non adipisci temporibus corrupti libero hic aspernatur quibusdam dolores perferendis, officis odio repellendus.









Bagaimana cara membuat akordeon khusus menggunakan CSS saja?


 Aperiam dolores autem odit, nihil eius sit minima quas laudantium aspernatur possimus reiciendis vitae ducimus labore quidem velit vel temporibus! Illo sunt placeat officis, tiure magnam. Ad sit perferendis ducimus dicta, est aspernatur asperiores, quasi beatae quos deleniti.









Apa yang dimaksud dengan gaya akordeon?


 Laudantium quibusdam laboriosam hic omnis quas ullam commodi rem. Architecto ut laborum eaque cum porro doloremque hic cupiditate tempora temporibus ducimus dolores magnam quidem, facilis sapiente officis voluptas? Vel, bukan!









Tutup semua ×

CSS

Salin CSS Metode Kotak Centang di atas karena kedua metode berbeda dari sudut pandang struktural saja. Anda mungkin memperhatikan bahwa ada satu tab yang terbuka sepanjang waktu. Ini terjadi karena Anda tidak dapat menghapus tanda tombol radio seperti kotak centang. Untuk melakukannya, tambahkan kode CSS di bawah ini ke tombol radio "Tutup Semua" tanpa deskripsi apa pun.

/* Menutup semua */
.faq-label {
 posisi: relatif;
}
.faq-tutup {
 tampilan: blok sebaris;
 bantalan: 1 rem;
 ukuran font: 1rem;
 latar belakang: #b61818;
 kursor: penunjuk;
 posisi: mutlak;
 kiri: 64rem;
}

Keluaran:

Terus Bereksperimen dan Tambahkan Animasi

Ada logika sederhana di balik akordeon: ketika Anda mengklik menu, konten tersembunyinya akan muncul. Karena Anda sekarang tahu cara membuat akordeon, inilah saatnya untuk menerapkan dan bereksperimen dengan pembelajaran Anda. Anda dapat membuat akordeon horizontal untuk menyempurnakan desain, terutama saat menampilkan gambar. Bereksperimenlah dengan kode dengan menyesuaikan efek transisi menggunakan animasi keyframe.

Naincy Mourya (16 Artikel Diterbitkan)

Naincy mengkhususkan diri dalam membangun situs web yang sangat responsif dan strategi konten yang efisien bersama dengan salinan web. Dia adalah seorang penulis teknologi lepas yang mengawasi dengan tajam teknologi yang sedang tren.

More From Naincy Mourya