Home » Javascript » Membuat Show Hide Element Dengan jQuery

Membuat Show Hide Element Dengan jQuery

20 Dec. 201142 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. Animasi Google Earth Day 2011
  3. Google Doodle : Lunar Eclipse
  4. Yesterday, The Beatles
  5. Google Doodle, Tarian Martha Graham
  6. Cara Mengatasi Anti Klik Kanan (Disable Right Click)
  7. Google Doodle Art Clokey’s 90th Birthday Animation
  8. Cara Membuat Spoiler
  9. Custom Javascript Per Post
  1. 28-12-2014 at 09:29 | #1

    Waduh Gan pas bangit saya lagi nyari yang ini, tapi kok masih gak mau jalan ya, apa saya yang salah?

    Reply

  2. 30-1-2015 at 01:41 | #2

    Permisi gan, kalau saya ingin buat beberapa tombol bagaimana? apakah saya mesti membuat banyak fungsi javascript? apa bisa cukup 1 fungsi javascript untuk semua tombol yang hendak saya buat? mohon bantuannya…

    Reply

    Jr Udin Reply:

    function togglebukatutupan() {
    var ele1 = document.getElementById(“tutupan”);
    var text1 = document.getElementById(“bukaan”);

    Reply

    Jr Udin Reply:

    Default kan begini kodenya:

    function togglebukatutup() {
    var ele1 = document.getElementById(“tutup”);
    var text1 = document.getElementById(“buka”);

    tinggal rubah atau kurangi/tambahin aja kata didepan/belakang.
    jadi kaya gini >>>

    function togglebukatutupan() {
    var ele1 = document.getElementById(“tutupan”);
    var text1 = document.getElementById(“bukaan”);

    Reply

  3. 30-1-2015 at 06:47 | #3

    salam kenal ya mas alwi ganteng..

    Reply

  4. 27-6-2015 at 18:28 | #4

    Mas, kalo membuat pasang javascript Show Hide Element Dengan jQuery itu nanti nya akan memperlambat loading nggak ya. tks

    Reply

  5. 27-6-2015 at 18:31 | #5

    kalau pakai javascript ini tambah berat ngga ya mas loading nya. tks

    Reply

  6. 2-4-2016 at 20:20 | #6

    kalau pakai jquery lebih singkat mas membuatnya.

    Reply

  7. 5-4-2016 at 11:48 | #7

    Ternyata cukup mudah ya, padahal aku masih pemula tentang javascript. Penjelasan jelas dan mudah dipahami…

    Reply

Comment pages
1 2 3 42555
4+6=? (Wajib diisi)