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

    Saya mau tanya:
    1. untuk Spoilernya itu ditaruh dimana? di postingannya, atau di java scriptnya?
    2. Sekalian aku juga ingin tanya mengenai pos komentar. kalau ingin membuat komentar yg pengisiannya lebih mudah spt punyanya blog ini (Pengisian data pd komentar cukup mengisi e-mail, dsb) itu bagaimana caranya?
    Mohon balasannya karena saya baru belajar blog

    Reply

  2. 15-3-2012 at 17:28 | #2

    maaf gan saya mau tanya ketika saya memakai salah satu script di atas dan saya gunakan pada postingan , dan di postingan itu saya menggunakan script yang sama namun ketika saya lihat hasilnya tidak berjalan dengan baik maksud saya ketika saya klik yang pertama terbuka namun saya klik yang kedua malah yang terbuka pada klik pertama dan klik kedua tidak terbuka , letak kesalahannya dimana ya ? apa mungkin harus berbeda script show hide pada satu postingan ? mohon pencerahannya gan thanks :D


    Yup, harus beda, fungsi script boleh sama tapi nama element harus beda jika ingin menggunakan 2 element dan ingin ditampilkan dalam satu halaman yg sama terutama bagian ini :

    var ele = document.getElementById("sembunyikan");
    var text = document.getElementById("penampakan");
    
    dan
    
    <a id="penampakan"
    <div id="sembunyikan"

    Reply

    ohim Reply:

    terus cara mengatasinya gimana bos??
    trims


    La itu di atas dah saya jawab, fungsi script boleh sama tapi nama element atau ID harus beda misalnya nama elemen/ID pertama “sembunyikan” dan “penampakan” maka untuk yg kedua ganti dg nama elemen/ID yg lain misalnya : “umpetin” dan “tongolin”

    Reply

    ohim Reply:

    trims replynya kang maklum newbie masih bebal dalam masalah blog,dah di coba tapi kok tetep yah? tadinya pengen bikin postingan kaya di mp3skulls.com ..pas diperiksa elemennya kok ada javascript void(0) maksudnya apa yah?

    Reply

  3. 26-3-2012 at 18:20 | #3

    Makasii sob tutorialnya sangat membantu.. (y)

    Reply

  4. 27-3-2012 at 23:52 | #4

    Makasih ilmunya

    Salam

    Reply

  5. dalle
    11-7-2012 at 19:06 | #5

    Mas mau tanya, klo untuk membuat show-hide seperti menu drop down yg ada di facebook jika diklik menu tersebut akan muncul tapi jika di klik disembarang halaman/dokument akan hilang contohnya sama seperti yg diatas tapi untuk membuat hide’y itu di klik diluar menu tersebut, tolong bantuannya kirim lewat email ya mas, sy tunggu bantuannya, thks.

    Reply

  6. 6-12-2012 at 09:01 | #6

    thanks info mengenai membuat show hide element dengan jquerynya.

    Reply

  7. 14-7-2013 at 15:37 | #7

    Jadi Scriptnya bisa kita pisahkan kedalam external javascript nga?

    Reply

  8. 28-11-2013 at 00:07 | #8

    Patut dicoba, Mksh infonya

    Reply

  9. 17-3-2014 at 10:48 | #9

    saya coba praktekkan…

    Reply

  10. yusni nasution
    29-3-2014 at 17:42 | #10

    terima kasih gan dan sangat membantu gan

    Reply

Comment pages
5+5=? (Wajib diisi)