Membuat Tombol Show Hide Hanya Dengan CSS HTML
Salah satu cara yang umum digunakan untuk hal ini adalah dengan membuat fitur Tombol Show Hide
Daftar isi
Ketika kita membuat sebuah website atau blog, sering kali kita ingin menampilkan atau menyembunyikan konten tertentu sesuai dengan kebutuhan. Misalnya, menampilkan informasi lebih lanjut setelah pengguna mengklik tombol atau link.
Salah satu cara yang umum digunakan untuk hal ini adalah dengan membuat fitur Tombol Show Hide.
Yang menarik, kamu bisa membuat fitur ini hanya dengan menggunakan CSS dan HTML, tanpa perlu menulis sedikit pun JavaScript! .
Apa itu Tombol Show Hide?
Tombol Show Hide adalah fitur yang memungkinkan kamu untuk menampilkan atau menyembunyikan suatu elemen di halaman web, hanya dengan mengklik tombol atau link tertentu.
Biasanya, fitur ini digunakan untuk menampilkan informasi tambahan seperti deskripsi panjang, detail produk, atau jawaban dari FAQ yang tidak ingin langsung tampil di awal halaman.
Ketika elemen yang tersembunyi di-"show" (tampilkan), konten tersebut akan muncul, dan ketika di-"hide" (sembunyikan), konten tersebut akan menghilang kembali.
Mengapa Perlu Menggunakan Tombol Show Hide?
Fitur Show Hide ini sangat berguna dalam banyak situasi. Salah satu alasan utamanya adalah untuk menghemat ruang pada halaman website atau blog.
Kamu tentu tidak ingin halaman web menjadi terlalu panjang atau penuh dengan informasi yang tidak terlalu diperlukan untuk dilihat secara langsung oleh pengunjung.
Dengan menggunakan Show Hide, kamu bisa menampilkan informasi tambahan hanya saat dibutuhkan, sehingga tampilan halaman lebih bersih dan rapi.
Selain itu, Show Hide juga bisa membuat halaman lebih interaktif. Pengguna bisa merasa lebih terlibat saat mereka mengklik tombol atau link untuk menampilkan konten tambahan.
Fitur ini juga dapat digunakan untuk menampilkan konten dalam bentuk **accordion**, di mana hanya satu bagian informasi yang ditampilkan pada waktu tertentu, dan yang lainnya tersembunyi.
See the Pen Membuat Show Hide Hanya Dengan CSS HTML by Sahroni (@digitalpoin) on CodePen.
Apakah Tombol Show Hide Selalu Menggunakan Script?
Banyak blogger bahkan saya sendiri mengira kalau untuk membuat fitur Show Hide pada halaman blog, selalu menggunakan JavaScript. Padahal, sebenarnya kamu bisa membuatnya hanya dengan menggunakan CSS dan HTML! Caranya adalah dengan memanfaatkan properti CSS seperti `display`, `visibility`, dan juga input checkbox yang bisa mengontrol apakah konten tersebut ditampilkan atau disembunyikan.
Pada tutorial ini, kita sudah membahas kode yang menggunakan CSS untuk membuat efek Show Hide hanya dengan mengandalkan HTML dan CSS. Jadi, tidak perlu khawatir tentang penggunaan JavaScript yang bisa membuat tampilan lebih rumit dan menambah beban halaman web.
Pada code show hide yang saya sematkan diatas, saya menggunakan CSS dan HTML yaitu dengan memanfaatkan properti :checked pada elemen input tipe checkbox dan pseudo-element CSS seperti ::after
Jika tertarik untuk menggunakan tombol show hide ini, silahkan edit-edit sesuai keinginan melalui Codepen yang sudah saya sediakan diatas.
Dimana Letak Tombol Show Hide Ditempatkan?
Fitur Show Hide ini bisa kamu letakkan di berbagai tempat dalam website, tergantung kebutuhan. Beberapa tempat umum di mana kamu bisa menggunakan fitur ini adalah:
- Di bagian FAQ: Agar pengunjung bisa melihat jawaban dari pertanyaan yang sering ditanyakan tanpa membuat halaman menjadi terlalu panjang.
- Deskripsi produk: Saat menampilkan detail produk, bisa diberi tombol "Lihat Detail" untuk menunjukkan informasi lebih lengkap.
- Menu navigasi: Misalnya, membuat menu dropdown yang muncul ketika pengguna mengkliknya.
- Konten artikel panjang: Agar pembaca bisa memilih untuk melihat lebih banyak konten jika mereka tertarik, tanpa mengganggu kenyamanan pembaca lain yang tidak membutuhkan informasi tersebut.
Intinya, Show Hide bisa kamu tempatkan di bagian manapun yang membutuhkan interaksi dengan pengguna dan ingin menyembunyikan konten tertentu agar halaman terlihat lebih rapi dan terorganisir.
Fitur Show Hide adalah cara yang sederhana dan efektif untuk mengelola tampilan konten di halaman website atau blog. Dengan menggunakan CSS dan HTML saja, kamu sudah bisa membuat efek tampil dan sembunyi yang interaktif dan berguna tanpa perlu menambahkan JavaScript. Pengguna bisa menikmati pengalaman browsing yang lebih bersih dan nyaman, sementara kamu bisa menjaga desain halaman tetap minimalis dan terstruktur.
Jadi, kalau kamu ingin memberikan pengalaman yang lebih baik untuk pengunjung website, tidak ada salahnya mencoba menambahkan fitur Tombol Show Hide di artikel, halaman produk, atau bagian lainnya. Gampang banget, kan?
