Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery

Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery

HobbyTekno - Pada Postingan ini, kita akan membuat sebuah project Menggunakan Event Show, Hide, dan Toggle. Saat tombol di klik, maka akan menampilkan dan menyembunyikan objek atau element yang diinginkan.
Langsung saja simak langkah-langkahnya

Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery


1. Buat file .html baru, Ketik Tag Dasar HTML, link ke jQuery dan script.js, ketik seperti kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Link ke jQuery -->
    <script src="jquery.js"></script>
    <!-- Link ke Script.js -->
    <script src="script.js"></script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial jQuery #5</title>
</head>
<body>
</body>
</html>
2. Buat file baru dengan nama script.js
3. Pada file .html Kita tambahkan Tombol dengan ID hide, show, dan toggle pada bagian <body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="toggle">Toggle</button>
4. Lalu tambahkan sebuah div dengan class box yang akan kita gunakan nantinya.

5. Tambahkan style agar box lebih menarik. Tambahkan diatas tag </head>
<style>
    .box {
        margin-top: 10px;
        width: 250px;
        height: 100px;
        padding: 10px;
        color: white;
        background-color: blue;
    }
</style>

5. Selanjutnya,  Pada script.js kita ketik kode berikut.
$(document).ready(function () {
    $('#hide').click(function () {
        $('.box').hide('slow');
    })
    $('#show').click(function () {
        $('.box').show('normal');
    })
    $('#toggle').click(function () {
        $('.box').toggle('fast');
    })
})
6. Selesai, saat tombol di klik, akan menjalankan Event masing-masing.

Penjelasan

Pada saat tombol #hide di klik, maka sembunyikan .box. anda bisa mengganti kecepatannya menjadi slow, normal, fast, dan dalam bentuk format angka yaitu milisecond.
$('#hide').click(function () {
        $('.box').hide('slow');
    })
Pada saat tombol #show di klik, maka tampilkan .box.
$('#show').click(function () {
        $('.box').show('normal');
    })
Pada saat tombol #toggle di klik, maka tampilkan dan sembunyikan .box. Toggle merupakan gabungan dari Show dan Hide.
$('#toggle').click(function () {
        $('.box').toggle('fast');
    })

Anda bisa mengembangkannya menjadi sesuatu yang berguna ataupun menarik dalam project website anda.

Sekian Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Tutorial jQuery #5 : Show, Hide, dan Toggle pada jQuery"