Fungsi Hide dan Show dengan JQuery

Hallo teman-teman, kali ini kita akan belajar membuat fungsi hide dan show dengan jQuery. Bagi teman-teman yang belum tau jquery itu apa, secara garis besar adalah untuk memanipulasi tampilan website secara langsung. Artinya perubahan yang terjadi pada website langsung berubah pada saat itu juga, jadi tidak perlu merefresh browser. Dan kali ini kita akan membahas salah satu fungsi yang ada di jquery yaitu fungsi hide dan show . Fungsi kedua tersebutÂ dapat membantu kalian dalam menyembunyikan atau menampilkan sebuah tampilan secara langsung tanpa perlu mereload halaman terlebih dahulu. Agar lebih memahami mari kita coba prakteknya. Ikuti contoh code dibawah ini.

index.html

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

<p>Text ini akan menghilang jika tombol hide di tekan</p>

<button id="hide">Hide</button>
<button id="show">Show</button>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

</script>

</head>

<body>

<p>Text ini akan menghilang jika tombol hide di tekan</p>

</body>

</html>

Save lalu coba kalian lihat pada browser kalian.

Jika kalian tekan tombol hide maka hasilnya seperti ini.

Dan tombol show ditekan, maka hasilnya akan kembali seperti semula.

Untuk menggunakan fungsi ini yang perlu kalian perhatikan adalah harus ada file jquery.js .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Baru kalian bisa menjalankan perintah jquery seperti hide dan show.

<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("p").hide();
    });
    $("#show").click(function(){
        $("p").show();
    });
});
</script>

$(document).ready(function(){

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

</script>

Untuk perintah jquery diatas, terdapat 2 perintah yang pertama apabila id hide di klik, maka akan menjalankan perintah menyembunyikan tag <p>. Begitu juga untuk perintah kedua. Namun perintahnya adalah menampilkan tag <p>

Sekian pembahasan mengenai fungsi hide dan show dengan jQuery. Semoga bermanfaat.

index.html

Facebook DUMET School

Categories