by 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.
