Home » Javascript » Membuat Show Hide Element Dengan jQuery

Membuat Show Hide Element Dengan jQuery

20 Des. 201148 comments
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 :

tanda plus

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/

Mudah-mudahan artikel tentang Membuat Show Hide Element Dengan jQuery ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Yuri Alekseyevich Gagarin
  2. Cara Mengatasi Anti Klik Kanan (Disable Right Click)
  3. Yesterday, The Beatles
  4. Google Doodle Art Clokey’s 90th Birthday Animation
  5. Google Doodle : Lunar Eclipse
  6. Cara Membuat Spoiler
  7. Custom Javascript Per Post
  8. Google Doodle, Tarian Martha Graham
  9. Animasi Google Earth Day 2011
  1. 20-12-2011 at 16:49 | #1

    Keren banget ini mas. Trims udah sharing ilmu nya mas.

    Reply

  2. 20-12-2011 at 17:46 | #2

    wah bagus banget mas., tar aku coba ah., makasih mas.,

    Reply

  3. 20-12-2011 at 21:52 | #3

    Ilmu baru lagi nih.. Makasih banyak mas, dulu saya juga pernah bikin spoiler kyak punya kaskus itu di blogspot tp lupa jg caranya.. hehe…

    Reply

  4. 21-12-2011 at 10:26 | #4

    Keren mas, saya biasa pakai slidetoggle, kayaknya hampir sama deh ya? :D

    Reply

  5. 21-12-2011 at 11:01 | #5

    Asli…keren dah…
    Thanks udah disharing. Ya mas…

    Reply

  6. 22-12-2011 at 11:25 | #6

    saya pernah gagl buat spoiler ini mas, tapi saya pensaran juga pengen bisa…

    Reply

  7. 22-12-2011 at 23:02 | #7

    terima kasih banyak Gan atas informasinya, semoga ini bermanfaat.

    Reply

  8. 23-12-2011 at 01:10 | #8

    makasih ilmu nya mas.
    kalau dibuat di sidebar untuk jadi buku tamu keren juga nih.

    salam hangat dan keep blogging

    Reply

  9. abdurroni
    23-12-2011 at 11:33 | #9

    mas, maaf klo pertanyaannya menyimpang dari artikel. saya mau tanya nih, klo saya lihat di address bar setiap artikel mas pasti pake html bukan (/). cara ngubah / jadi html gmn caranya?

    Reply

  10. 23-12-2011 at 22:18 | #10

    saya msh pake plugin spoiler mas
    mana yg lbh “berat” mas, pake script gini atau pake plugin sejenis? blum dibandingin soalnya

    Reply

Comment pages
1 2 3 5 2555
0+8=? (Wajib diisi)