Terbaru!

Show Hide Element Dengan Javascript

Kali ini saya ingin menyematkan trik 'Menyembunyikan dan Memunculkan sebuah elemen dengan Javascript'. Perintahnya kita gunakan pilihan dengan <SELECT>.

Demo




Step 1 : Buat Element

<div id='DivTampil' style='display:none'>
<p>ELEMEN  TAMPIL</p>
</div>

DivTampil = id element yang nanti akan dipanggil oleh script.
Style kita set 'display:none'. Artinya, ketika pertama kali halaman ini dipanggil, elemen ini tidak ditampilkan.

Step 2 : Buat Pilihan Perintah

<form name='NamaForm' method='post' action='#'>
<select name='NamaSelection' onchange='DisplayShowHide()'>
<option value='muncul'>Munculkan</option>
<option value='hilang' selected>Hilangkan</option>
</select>
</form>

Perhatikan pada baris kedua, onchange='DisplayShowHide()' berarti memberikan perintah menjalankan script DisplayShowHide() ketika pilihan ini di-klik.


Step 3 : Buat Script Fungsi DisplayShowHide()



<script language="JavaScript" type="text/JavaScript">
function DisplayShowHide()
{
if (document.NamaForm.NamaSelection.value == "muncul"){document.getElementById('DivTampil').style.display="inline"}
if (document.NamaForm.NamaSelection.value == "hilang"){document.getElementById('DivTampil').style.display="none"}
}
</script>

Jika nantinya di form kita pilih option dengan value "muncul", maka Elemen 'DivTampil' akan ditampilkan. Lalu jika nantinya di form kita pilih option dengan value "hilang", maka Elemen 'DivTampil' akan disembunyikan.

Lengkapnya script tersebut menjadi :

<form name='NamaForm' method='post' action='#'>
<select name='NamaSelection' onchange='DisplayShowHide()'>
<option value='muncul'>Munculkan</option>
<option value='hilang' selected>Hilangkan</option>
</select>
</form>
<br>

<div id='DivTampil' style='display:none'>
<p>ELEMEN  TAMPIL</p>
</div>


<script language="JavaScript" type="text/JavaScript">
function DisplayShowHide()
{
if (document.NamaForm.NamaSelection.value == "muncul"){document.getElementById('DivTampil').style.display="inline"}
if (document.NamaForm.NamaSelection.value == "hilang"){document.getElementById('DivTampil').style.display="none"}
}
</script>

Agar anda bisa lebih mudah memahami sript ini, silahkan mencoba demo yang ada di bagian atas artikel ini. Selamat mencoba.

Tidak ada komentar