Cara Membuat Tombol Show Hide Via DIV Script Toggle

Tutorial DIV, Scripts dan Toggle . .

Pernahkah Anda menjumpai sebuah blog yang memanfaatkan script toggle untuk menampilkan dan menyembunyikan sesuatu, baik itu foto, teks biasa, url link, maupun script yang telah di parse..?
Yah itu adalah kreasi dari pemilik blog yang telah menambahkan JavaScript dan CSS kedalam Template-Nya.
Andapun juga bisa membuatnya sendiri untuk blog Anda..
SHOW/HIDE Menggunakan Link atau Tombol
Anda tentu sudah mengerti dengan maksud penulis bukan..? Jika target atau konten yang berada pada bagian yang Anda sembunyikan adalah kode HTML, maka Anda harus memparse terlebih dahulu disitus yang menyediakan jasa Parse, atau bisa juga dengan mengunjungi situs parse ini..

Mengapa harus di Parse..? dan apa pengaruhnya..?

Pengaruhnya tentu ada.. Jika objek atau output yang Anda masukkan pada bagian yang Anda sembunyikan adalah  kode HTML dan lokasi penyimpanan berada pada halaman posting HTML (bukan Compose) maka segala bentuk kode yang belum di parse akan tetap hidup saat di publikasikan.

Tampilkan <== Klik untuk demo . .
<script language="javascript">
function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "Tampilkan"; } else { ele.style.display = "block"; text.innerHTML = "Sembunyikan"; } }
</script>

Tambahkan Toggle DIV dibawah ini setiap kali Anda membutuhkannya pada halaman posting atau tata letak

<a id="displayText" href="javascript:toggle();">Tampilkan</a> <== Klik untuk demo . .<div id="toggleText" style="display: none">
<b> Disini letak objek yang akan ditampilkan</b>
</div>

Keterangan..!!
1. Untuk teks Tampilkan dan Sembunyikan pada Javascript adalah kode mutlak yang akan tampil setip kali orang menekan itu, sedangkan teks Tampilkan pada kode DIV adalah menu yang pertama kali muncul ketika dilihat pengunjung. Ketika seseorang menekan kembali maka yang muncul adalah teks yang sama dengan yang ada pada javascript.
2. <b> Disini letak objek yang akan ditampilkan </b> adalah halaman yang tampil ketika orang menekan toombol Tampilkan, kode <b> dan </b> bisa Anda hapus atau ganti menjadi kode lain, namun jangan mengedit yang selain keterangan no 1 dan 2.
3. Namun sayangnya kode div ini tidak bisa digunakan untuk lebih dari satu pada halaman yang sama. Mungkin Anda ingin bereksperimen sendiri, silahkan tapi setelah berhasil jangan lupa beritahu penulis juga ya..? :D
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini