Juli 5, 2020

Menyembunyikan dan menampilkan element dengan jQuery

Kali ini mencoba lagi menggunakan jQuery untuk menyembunyikan dan menampilkan element dengan jQuery pada website.

Trik ini sangat simple dan sederhana, penulisan scriptnya-pun tidak terlalu panjang dan rumit, sehingga mudah dipahami.

Hanya saja, untuk membuat script ini berjalan dengan baik, kita membutuhkan bantuan link jQuery external.

Kita lihat scriptnya dibawah

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Menyembunyikan dan menampilkan element dengan jQuery</title>
    <script src="https://my-id.site/editor/js/jquery.min.js"></script>
	
<!-- begin CSS code -->

<style>
body {
    background: #dde; 
    font: 14px arial,sans-serif;
    margin: 10px;
}
div  {
    background: #f5f5f5; 
    color: #000; 
    padding: 8px; 
    width: 340px;
    text-align: center;
    border: 1px solid #00f;
    border-radius: 8px;
}
p, #f1 {
    color: blue;
    cursor: pointer;
}
</style>

<!-- end of CSS code -->

</head>
<body>

<!-- this content between tag <body>...</body> will be show on browser -->

<h2>Menyembunyikan dan menampilkan element dengan jQuery</h2>

    <p class="c1" id="f1">» Sembunyikan element</p>
    <p class="c1" id="f2" style="display:none;">» Tampilkan element</p>
	
    <div class="c1">
        Element ini akan di sembunyikan atau di tampilkan dengan <strong>jQuery</strong>, silahkan klik <u id="f1">Sembunyikan element</u>.
    </div>

<!-- Begin JS code -->
  
<script>
$(document).ready(function(){
$("#f1, #f2").click(function(){
    $(".c1").slideToggle("fast");
});
});
</script>

<!-- End of JS code -->
<!-- End of body content -->

</body>
</html>

Line yang di highlight nomer 6 pada script diatas adalah link external jQuery, Anda bisa menggunakan link tersebut dengan https://code.jquery.com/jquery-3.4.1.slim.min.js

Untuk melihat hasil dan mengedit script diatas, silahkan gunakan halaman Realtime HTML Editor ↗ yang telah Saya sediakan.

Sedikit penjelasan tentang Menyembunyikan dan menampilkan element dengan jQuery semoga bermanfaat, dan salam sukses untuk Anda semua.