Membuat Efek Hide dan Show dengan JQuery

Belajar Web Design

Assalamualaikum Wr. Wb

Sahabat Webhozz dimanapun berada, apa kabarnya??? Mudah-mudahan sehat selalu dan selalu bahagia ya, amin.

Oke, pada kesempatan kali ini kita akan belajar tentang JQuery. Kita akan membuat objek dari tag HTML bisa menghilang dan muncul kembali.

Kita akan membuat beberapa tag HTML yang dibutuhkan, yaitu div, tombol submit dan sentuhan sedikit css.

Jadi, ceritanya, kita akan membuat tag

ini akan dibuat dengan bentuk kotak berwarna merah lalu hilang atau muncul lagi saat kita tekan tombol submit. Oke…langsung aja kita mulai.

1. Tulis script html awal.

<!DOCTYPE html>
<html>
<head>
    <title>Efek Hilang</title>
</head>
<body>
 
</body>
</html>

2. Masukkan tag berikut ini. Sisipkan pada tag.

<h1>Efek Hilang</h1>
 
<input type="submit" value="HILANG">
<input type="submit" value="TAMPIL">
<br><br>
<div></div>

3. Selanjutnya tambahkan sedikit sentuhan css supaya tag

memiliki warna dan bentuk. Sisipkan pada tag.

<style type="text/css">
    div
    {
        margin-top: 30px;
        width: 100px;
        height: 100px;
        background-color: crimson;
    }
</style>

4. Kemudian download file JQuery di jquery.com. Copy file JQuerynya ke dalam satu folder dengan file html yang sedang kita buat. Lalu gunakan script ini untuk memanggil file JQuery tersebut. Masukkan pada tag

<script type="text/javascript" src=""></script>

5. Selanjutnya tambahkan class hilang pada tombol HILANG, tujuannya adalah untuk dikoneksikan dengan fungsi dari JQuery.

<input type="submit" value="HILANG" class="hilang">

6. Buat kode pembuka JQuery, letakkan di bawah yang tadi digunakan untuk memanggil file JQuery dan tambahkan script fungsi untuk menghilangkan.

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.hilang').click(function()
        {
            $('div').hide();
        })
    })
</script>

7. Dan beginilah seluruh kodenya.

<!DOCTYPE html>
<html>
<head>
    <title>Efek Hilang</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('.hilang').click(function()
            {
                $('div').hide();
            })
        })
    </script>
 
    <style type="text/css">
        div
        {
            margin-top: 30px;
            width: 100px;
            height: 100px;
            background-color: crimson;
        }
    </style>
</head>
<body>
 
    <h1>Efek Hilang</h1>
 
    <input type="submit" value="HILANG" class="hilang">
     
    <div></div>
 
</body>
</html>

8. Saat dijalankan di browser, beginilah posisi awal.

9. Dan saat ditekan tombol hilang, maka akan terjadi seperti ini.

Demikianlah postingan artikel pada kali ini. Semoga bermanfaat ya…dan selamat mencoba. Semoga sukses selalu, amin.

No related posts.