Membuat Show Hide Element Dengan jQuery
Di postingan sebelumnya tentang Cara Membuat Spoiler ada pertanyaan dari sobat Fanoy sebagai berikut :
mas, kalau tombol spoiler itu diganti teks doang (bukan tombol) bisa ga?
jadi maksud saya begini, syaa pernah liat di Google ada link yang disebelah kirinya itu terdapat tanda (+) nah saat link itu di klik, konten atau penjelasan muncul dibawahnya. dan saat penjelasan atau konten tersebut terbuka, tanda (+) menjadi tanda (-). bagaimana tips membuatnya?
makasih
Pertanyaan tersebut sebenarnya sudah saya jawab, dan untuk menghindari jawaban yang berulang-ulang dari pertanyaan yang serupa maka sekalian saja saya arsipkan jawaban saya tersebut di postingan ini.
Tombol spoiler dengan fungsi untuk membuat Show Hide dari sebuah element bisa dibuat dengan tanda plus atau minus dengan sedikit bantuan jQuery, kodenya kira-kira seperti ini :
<script language="javascript"> function toggle() {
var ele = document.getElementById("sembunyikan");
var text = document.getElementById("penampakan");
if(ele.style.display == "block") {
ele.style.display = "none"; text.innerHTML = "+";
} else { ele.style.display = "block"; text.innerHTML = "-"; } } </script>
<a id="penampakan" style="font-size:20px;text-decoration:none" href="javascript:toggle();" rel="nofollow">+</a>
<div id="sembunyikan" style="display: none;padding:5px;border:1px solid #666666;width:495px;margin-bottom:15px">Di sini element atau bagian yang ingin ditampilkan atau disembunyikan (Show Hide Element)</div>
Ini hasilnya :
+
Tanda plus minus bisa juga kita ganti dengan teks lainnya, misalnya buka tutup, tampilkan sembunyikan dll. Contoh :
Tampilkan
Selain dengan tanda plus minus, buka tutup, tampilkan sembunyikan dll (dalam bentuk teks), kita juga bisa menggantinya dengan sebuah gambar (gambar plus dan minus). Kodenya kira-kira seperti ini :
<script style="display:none" language="Javascript" type="text/javascript">
function togglegambar(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "none") {
ele.style.display = "block";
imageEle.innerHTML = '<img class="aligncenter" title="Sembunyikan" src="http://i690.photobucket.com/albums/vv270/alwi/minus.png" alt="tanda minus" width="24" height="24" />';
}
else {
ele.style.display = "none";
imageEle.innerHTML = '<img class="aligncenter" title="Tampilkan" src="http://i690.photobucket.com/albums/vv270/alwi/plus.png" alt="tanda plus" width="24" height="24" />';
}
}
</script><a id="imageDivLink" href="javascript:togglegambar('contentDivImg', 'imageDivLink');"><img class="aligncenter" title="Tampilkan" src="http://www.randomsnippets.com/wp-includes/images/plus.png" alt="tanda plus" width="24" height="24" /></a>
<div id="contentDivImg" style="display: none;padding:5px;border:1px solid #666666;width:583px;margin-bottom:15px">Ini contoh membuat tombol spoiler (Show Hide Element) menggunakan gambar (+) dan minus (-)</div>
Hasilnya :
Dan masih banyak lagi yang lainnya dengan berbagai macam efek jQuery seperti slideToggle, fadeTo, animate dan lain-lain.
Referensi :
http://www.w3schools.com/jquery/default.asp (jQuery Tutorial)
http://api.jquery.com/hide/
kalo untuk blogspot bisa gak mas? terus scriptnya dipasang di bagian html postingan? apa gimana ya?
Reply
Mau nyoba semuanya Mas…
Itu postingan barunya kok nggak bisa dikomentari?
Jadwal MotoGPnya ditunggu
Salam!!!
Reply
marsudiyanto.net Reply:26-12-2011 at 08:22
Ternyata Jadwal MotoGp sudah ada :D
Saya nggak teliti
Reply
mencoba mempraktekan ilmunya mas
Reply
wah makasih banget mas., aku coba ah hehe.,
Reply
langsung dicoba bung alwi. thanks
Reply
keren mas., tar coba ah hehe
Reply
saya googling sana sini nyari show hide text, eh baliknya ke sini juga . Makasih gan.
Reply
mas ALWI,
tanya donk, dimana kita bisa belajar COBOL language yang buat PC ?, atau beli software nya ?
salam,
poet
Reply
kalau mao ngasih ilmu kasih aja jangan sungkan2. Pake gak bisa di Block n Copy segala. di Blog Gua banyak tuuuh cara yg kaya ginian
Reply
Hiya! I just want to give a big thumbs up for the best article in a post here by you. I’ll probably go back to your weblog closer.
Reply