Belajar jQuery : Efek Hide dan Show

Belajar Web Design

Efek JQuery Hide dan Show

Pada kesempatan kali ini, kita akan mempelajari tentang salah satu efek dari JQuery.

Sebelumnya sudah pernah kita bahas tentang event dan effect dari JQuery disini (https://www.webhozz.com/blog/belajar-jquery-pengenalan-dan-syntax-dasar/).

Efek dari JQuery kali ini adalah Hide dan Show.

Seperti namanya sudah dapat ditebak bahwa artinya sembunyi dan tampil.

Ya, bener banget.

Artinya kita akan membuat elemen HTML bisa menghilang atau ditampilkan.

Sebagai Contoh, kita langsung praktekkan aja ya. Yuk…

  1. Ketikkan script kode HTML berikut ini, tambahkan juga script JQuery seperti yang sudah dijelaskan disini(https://www.webhozz.com/blog/belajar-jquery-pengenalan-dan-syntax-dasar/).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hide dan Show</title>
</head>
<body>
    
    <h1>Hide dan Show</h1>

    <button>Hilangkan</button>
    <button>Tampilkan</button>

    <h4>Teks ini akan hilang dan bisa Tampil lagi...</h4>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function () 
        {
            
        });
    </script>
</body>
</html>

Maka akan tampil seperti ini pada browser.

2. Kita lihat, disitu ada kedua tombol kan??? Nah, event untuk menuju dari Hide dan Show akan dimasukkan pada kedua tombol itu.
Jadi kita butuh event “click” Dan ada teks HTML , yang bertuliskan pesan “Teks ini akan hilang dan bisa Tampil lagi…”. Artinya, pesan tersebutlah yang nanti akan hilang serta bisa tampil, setelah kita klik kedua tombol di atasnya.
Oke, untuk kedua tombol tersebut, kita tambahkan masing-masing nama class untuk identifikasi di JQuerynya nanti.

<button class="hilang">Hilangkan</button>
    <button class="tampil">Tampilkan</button>

3. Seperti penjelasan langkah no. 2. Kita akan menambahkan event pada kedua class=”” tadi. Yaitu event “.click()”. Berdasar kedua class=”” tadi, inilah contoh eventnya di JQuery.

$(document).ready(function () 
{
    $(".hilang").click(function() 
    { 
        //efeknya disini  
    });

    $(".tampil").click(function() 
    { 
        //efeknya disini  
    });
});

Nah, begitulah format untuk event dari JQuery. Artinya, efek akan bekerja saat kedua tombol yang sudah diberikan class=”” sudah diklik.

4. Oke, untuk tambahan efeknya kita tambahan kode “.hide()” dan “.show” dalam kedua event tersebut.

$(".hilang").click(function() 
{ 
    $("h4").hide(); 
});

$(".tampil").click(function() 
{ 
    $("h4").show();  
});

Nah, disitu kita lihat ada $(“h4”) kan??? Itu adalah elemen HTML yang akan kita berikan efek.

5. Kita jalankan lagi di browser,awalnya akan tampil normal seperti pada gambar di langkah 1. Lalu kita coba klik tombol “Hilangkan”.

Gambar di atas kita lihat bahwa elemen teks HTMLnya yang tadinya di bawah kedua tombol tersebut jadi menghilang.

6. Seperti langkah no. 5, kan teksnya sudah hilang. Kita akan tampilkan lagi dengan klik tombol “Tampilkan”.

Pada gambar di atas, kita lihat bahwa teks yang tadinya hilang bisa tampil lagi. Oh iya, tombol “Tampilkan” hanya bisa berfungsi jika elemen yang terkait sudah dihilangkan.

7. Ada satu effect lagi, yaitu “Toggle”. Kita coba sama-sama ya. Kita buatkan tombol baru.

<button class="tugel">Toggle</button>

Sehingga di browser, kita sudah punya 3 tombol.

8. Lalu kita buatkan juga event beserta effectnya pada JQuery, untuk effectnya kita gunakan “.toggle()”.

$(".tugel").click(function() 
    { 
        $("h4").toggle();  
    });

9. Saat kita jalankan di browser, klik tombol “Toggle” maka akan terjadi sebagai berikut.

Nah, effect toggle bisa menghilangkan elemen HTML yang terkait.

Tapi, kita coba klik tombol “Toggle” sekali lagi.

Jadi, toggle bisa juga menampilkan. Artinya toggle bisa dua-duanya.

10. Bukan hanya itu aja, ada parameter tambahan lagi. Pada effect “.hide()”, “.show()”, “.toggle()” kita bisa tambahkan nilai disitu contohnya “2000”. Perhatikan contoh berikut.

$(".hilang").click(function() 
    { 
        $("h4").hide(2000); 
    });

    $(".tampil").click(function() 
    { 
        $("h4").show(2000);  
    });

    $(".tugel").click(function() 
    { 
        $("h4").toggle(2000);  
    });

Lalu, kita bisa coba lagi dengan semua tombol yang sudah kita buat.

Angka tersebut adalah parameter yang berfungsi untuk menunjukkan waktu durasi. 2000 artinya 2 detik.

Jadi, masing-masing efek tersebut akan hilang atau muncul secara perlahan dalam waktu 2 detik. Silahkan coba dengan angka yang berbeda, supaya dapat hasil efek yang punya durasi yang beda.

Demikianlah, sekilas tentang efek Hide dan Show dari JQuery ini. Akhir kata, semoga bermanfaat ya.

No related posts.