Kali ini, saya akan memberikan tutorial/cara menampilkan dan menyembunyikan sebuah elemen (seperti div, tulisan <a>, dan lain lain) dengan tombol dan bantuan dari Javascript. Nama lain dari cara ini adalah OnClick Div/Element.
Cara kerjanya begini, pada awalnya elemen masih tidak terlihat, alias disembunyikan. Lalu, ketika anda mengklik tombol yang tersedia, elemen akan muncul. Ketika anda mengklik tombolnya lagi, elemen akan hilang lagi seperti Toogle.
Untuk lebih jelasnya silakan anda lihat gambar diatas tadi.
Script yang saya gunakan untuk membuat OnClick Div ini adalah Javascript, jadi ada kemungkinan untuk tidak work bila diakses melalui Opera Mini dan UC Mini. Insyaallah nanti saya buatkan yang menggunakan script CSS.
Bagaimana? Anda ingin membuatnya? Silakan ikuti panduan berikut ini.
a. Membuat Tombolnya
Pada langkah pertama ini, anda akan membuat tombolnya terlebih dahulu. Saya sarankan menggunakan kode <button /> agar lebih mudah. Contoh kodenya yang dapat anda gunakan seperti ini:
<button onclick="kodejarwoTOGDIV()"> Click Me </button>
- Kode yang saya tebalkan merupakan kode yang berfungsi agar tombol dapat terhubung dengan Javascript nantinya.
- Sedangkan kode yang saya beri garis bawah merupakan ID dari fungsi Javascript yang akan saya gunakan pada tutorial kali ini.
- Tulisan yang berwarna hijau adalah judul/nama dari tombolnya.
b. Membuat elemen yang ingin ditampilkan & disembunyikan
Tombol sudah dibuat, sekarang mari kita buat elemen yang ingin ditampilkan dan disembunyikannya. Disini saya akan menggunakan kode <div>, karena penggunaannya yang cukup mudah. Berikut contoh elemen yang saya buat, anda dapat membuatnya seperti ini juga.
<div id="kodejarwoTOGDIV" style="display: none;"> www.KodeJarwo.com </div>
- Kode yang saya tebalkan dan garis bawahi adalah ID dari div nya, jangan diubah. Bisa anda lihat pada kode yang saya garis bawahi, ID nya sama dengan ID tombol pada langkah pertama diatas, yaitu kodejarwoTOGDIV .
- Kode yang berwarna biru berguna agar elemen tidak muncul dari awal.
- Kode yang berwarna hijau adalah tulisan yang ingin dimunculkan/disembunyikan nantinya. Bisa anda ubah sesuka hati.
Sampai pada langkah ini keseluruhan kode yang kita berhasil buat adalah seperti ini:
<button onclick="kodejarwoTOGDIV()">Click Me</button>
<div id="kodejarwoTOGDIV" style="display: none;"> www.KodeJarwo.com </div>
c. Memasang Javascript pengaturnya
Langkah terakhir, yaitu memasang Javascript yang membuat tombol ini bekerja/work.
Silahkan anda tambahkan lagi kode Javascript dibawah ini:
<script>
function kodejarwoTOGDIV() {
var kj = document.getElementById('kodejarwoTOGDIV');
if (kj.style.display === 'none') {
kj.style.display = 'block';
} else {
kj.style.display = 'none';
}
}
</script>
- Kode yang saya garis bawahi adalah ID dari tombol dan elemen pada langkah pertama dan kedua. Bila anda mengubahnya, maka silahkan ganti juga ID dari Javascript diatas. Bila tidak, biarkan saja.
Selesai...
Secara keseluruhan, kodenya berbentuk seperti ini:
<button onclick="kodejarwoTOGDIV()"> Click Me </button>
<div id="kodejarwoTOGDIV" style="display: none;"> www.KodeJarwo.com </div>
<script>
function kodejarwoTOGDIV() {
var kj = document.getElementById('kodejarwoTOGDIV');
if (kj.style.display === 'none') {
kj.style.display = 'block';
} else {
kj.style.display = 'none';
}
}
</script>
Selamat mencoba dan semoga berhasil! Bila ada yang ingin ditanyakan silahkan anda berkomentar, secepatnya akan saya balas.