Cara Membuat Efek Show Hide Dengan Jquery

Publish Date : 11-07-2017 , dibaca 13127 kali, Hari ini dibaca : 1 kali ,0 comments

Tutorial kali ini admin akan memberikan tulisan bagaimana cara menampilkan / menyembunyikan elemen HTML dengan menggunakan Jquery .. Ini adalah tutorial untuk menyembunyikan (hide), menampilkan (show), dan toggle sebuah elemen dengan javascript, menggunakan jQuery Library. Mungkin anda sedang mengalami masalah bagaimana cara nya menampilkan element di dalam tag <div> HTML dan kemudian menyembunyikan nya lagi seseuai dengan kriteria yang ada.. Dengan Jquery kita bisa dan bahkan sangat mudah untuk mengatasi masalah tersebut.

Efek show adalah efek memunculkan sebuah element HTML secara perlahan, sedangkan efek hide kebalikan dari show, yakni menyembunyikan sebuah element HTML dengan perlahan.Sementara toggle diguanakan untuk membalikkan kedaan dalam fungsi itu sendiri,,, bisa dari show ke hide atau sebaliknya. Untuk membuat kedua efek ini kita bisa menggunakan method show() dan hide() jQuery.

Perhatikan Gambar berikut ini :

Dari gambar diatas tentu anda sudah mengerti bukan yang dimaksud dengan Show, hide dan Toggle pada Jquery.. nah untuk scriptnya bisa anda dapatkan dibawah ini :

Note : Anda harus terkoneksi internet ya untuk menjalankannya . simpan dengan nama index.html dan jalankan

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $(".alamat").hide(500);
    });
    $("#show").click(function(){
        $(".alamat").show(500);
    });
});

$(document).ready(function(){
  $("#button").click(function(){
    $("#isi").toggle(200);
  });
});
</script>
</head>
<body>
<center>
<b>Membuat Efek Show Hide Jquery<br/>
 Suckittrees.com</b>
<br/><br/>
<select name='tes'>
    <option value='Kepala Keluarga' id='show'>Show</option>
    <option value='Istri' id='hide'>Hide</option>
    </select>

<div class='alamat'>TES HIDE SHOW 1</div>
<br/><br/>
<hr>
<button id='button'>Toggle</button>
<div id='isi'>Penggunaan jQuery toggle</div> 
</center>
</body>
</html>

hide(500) akan membuat proses hide/ proses menyembunyikan DIV contoh akan memakan waktu 500ms/0.5 detik. Dengan kata lain, hide(500) akan menampilkan animasi. Kalau anda tidak ingin animasi, bisa memakai hide() (tanpa angka di dalam tanda kurung).

Sebenarnya tidak cuma tergantung pada link atau button untuk trigger effect nya. Kita juga bisa menyisipkan onclick=”$(‘#contoh’).hide(500);” pada setiap elemen, misalnya pada tag DIV, P, TABLE, IMG.

Refresh Reload Captcha Image dengan Javascript
Previous Post

Parse HTML Tools Blogger
Next Post