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.

Mungkin Anda Menyukai