Hari ini saya akan menuliskan bagaimana membuat FAQ tanpa plugin di WordPress. Kali ini saya akan menambahkan CSS ke blok details yang pernah saya tuliskan sebelumnya tentang membuat FAQ tanpa plugin di WordPress.

Contohnya seperti yang ada di FAQ Geneus DNA Indonesia. Tetapi kali ini saya mengubah halaman Arsip yang ada di Risna.Info.

Style Accordion dengan Blok Details + CSS

Tulisan sebelumnya saya membuat FAQ Accordion dengan memasukkan CSS, HTML dan Java Script ke dalam CustomHTML. Untuk versi ini, saya tidak membutuhkan Java Script,. Saya juga tidak menggunakan HTML untuk bagian pertanyaan dan jawaban, tetapi menggunakan blok Details yang ada di WordPress.

Jadi kali ini saya hanya perlu menambahkan bagian stylenya dalam blok CustomHTML, dan tentunya jangan lupa diapit dalam tag <style> dan </style>. Kalau kita salah tag, otomatis CSS nya tidak mengubah style tampilan.

Perhatikan, kalau CSS yang dibutuhkan harus diletakkan dalam blok CustomHTML di bagian atas sebelum memanggil blok Details.

Bagaimana kode CSS nya?

<style>
 
details{
  font-size: 1.1rem;
}

summary {
  background-color: #ffe6b3;
		font-size: 1.5rem;
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;  
  transition: height 1s ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after{
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 1em;
}

details[open] > p{
    margin-top: .7em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

details[open] summary:after{
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

details[open] div{
  padding: .5em 1em;
}
</style>

Di halaman ini, saya menambahkan juga kode CSS nya supaya blok Details mendapatkan style yang sama dengan halaman Arsip Risna.info.

Modifikasi CSS

Bagaimana kalau kita ingin memodifikasi css yang diberikan, misalnya mengganti warna atau mengganti tanda plus dan minus di bagian pertanyaan menjadi lambang lain?

Cari saja yang ada kata background color, dan ubah deh nilainya. Mau tahu mencari kode warnanya di mana? Bisa dicari saja kode hexadesimal dari warna. Bisa cari di internet untuk color picker atau dari aplikasi pemrosesan gambar.

Kalau untuk mengganti tanda plus dan minus, bisa dicari kode unicode dari lambang tersebut.

Seru Juga Mainan CSS

Setelah mencoba berbagai cara membuat style accordion dengan melibatkan CSS, saya jadi menemukan mainan lama kembali. Apalagi setelah tahu cara memasukkan CSS secara lokal untuk posting tertentu dan tidak akan mengubah halaman lain yang memanggil blok yang sama.

Kalau mau CSS berlaku untuk keseluruhan blog juga bisa, caranya dimasukkan saja ke templatenya. Tapi bagian ini harus hati-hati, kalau salah memasukkan bisa merusak tampilan.

Selamat mencoba!