Script Javascript : menampilkan dan menyembunyikan sebuah element html (Display/Hide)
Bisa tidak kita buat sebuah input box, tetapi munculnya setelah element button di beri event/diklik ?
Jawabannya, Bis. Kita bisa membuatnya baik itu dengan JavaScript, JQuery, dan dengan bantuan HTML
Design layoutnya kira-kira akan seperti Gambar 1 dan hasilnya pada Gambar 2.
 | |
| Gambar 1 |
 |
| Gambar 2 |
Langkah umumnya seperti berikut ini :
1. Pertama kita buat layout yang terdiri dari button, dan input-text yang mau ditampilkan.
2. Kemudian, set style="display:none;" pada attribut input-textnya.
3. Selanjutnya, buat sebuah script javascriptnya.
function viewInput() {
var e = document.getElementById('input_id');
if(e.style.display == 'none')
document.getElementById('input_id').style.display = "block"
else
document.getElementById('input_id').style.display = "none"
}
4. Kode akhirnya akan seperti ini,
<html>
<head>
<script type="text/javascript">
function viewInput() {
var e = document.getElementById('input_id');
if(e.style.display == 'none')
document.getElementById('input_id').style.display = "block"
else
document.getElementById('input_id').style.display = "none"
}
</script>
</head>
<body>
<div style="width:50%;font-family:Helvetica Neue;margin-l eft:auto;margin-right:auto;color:#da630b;">
<button onclick="viewInput()" width="100px">Click Me</button>
<input type="text" id="input_id" style="display:none;"/>
</div>
</body>
</html>
5. Terakhir, panggil file htmlnya di browser anda :)
Download Kode lengkapnya disini.
Terima kasih, bantu share ya :)
Post a Comment