CSS Hide Show Field

Tinggalkan Balasan

css_showhide

css_showhide

Halo Semua, kali ini saya akan memberikan cara bagaimana menampilkan dan menyembunyikan (Show Hide Toggle) elemen html hanya dengan menggunakan CSS saja.
Mengapa dengan CSS bukan JavaScript? Ya, JavaScript memang bisa melakukan apa saja yang bisa dilakukan dengan CSS, tapi lebih simpel dengan CSS, Keep It Simple Smart! 🙂
CSS menyediakan pseudo-class “:checked” yang bisa kita gunakan pada selector CSS, dalam hal ini id=trigger.
Tanda tilde (~) pada selector .trigger:checked ~ .toggle1 digunakan untuk memilih element toggle1 yang ditempatkan secara langsung setelah memilih (:checked) element .trigger.

Berikut coding selengkapnya.

<!doctype html>
<html>
<head>
<title>CSS Toggle</title>
<style>
   .toggle1 {display:none;}
   .trigger:checked ~ .toggle1 {display:inline;}
</style>
</head>
<body>
<div> Warna Favorit: </div>
<input type="radio" name="warna" id="Merah"/><label for="Merah">Merah</label>
<input type="radio" name="warna" id="Hijau"/><label for="Hijau">Hijau</label>
<input type="radio" name="warna" id="Biru"/><label for="Biru">Biru</label>
<input type="radio" name="warna" class="trigger" id="Lainnya"/><label for="Lainnya">Lainnya : </label>
<input type="text" name="warna" class="toggle1" autofocus/>
</body>
</html>

Anda tertarik, selamat mencoba.

Sumber: http://css-workshop.com/css-show-hide-div-without-javascript/

Leave your comment