tRikSonic
Tema

Fungsi jQuery toggle (), Belajar jQuery

Terakhir diperbarui : 23 Mei 2018 - 15.53

Tutorial jquery toggle()

jquery toggle() digunakan untuk menyembunyikan dan menampilkan element (1 perintah yang mempunyai 2 fungsi) .hide() dan .show() dengan metode interaktif yang dilakukan oleh user, baik itu dengan metode klik fungsi, mouse fungsi, tombol fungsi pada komputer.
jQuery

Syntax:

$(selector).toggle(speed,callback);

Contoh penerapan jquery toggle()

Contoh 1 :
$(function(){
   $("button").click(function(){
     $("#demo").toggle();
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.box {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button>Toggle DIV</button>

<div class="box" id='demo'>Tekan tombol diatas</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $("button").click(function(){
     $("#demo").toggle();
   });
});
</script>

</body>
</html>
Contoh 2 :
$(function(){
   $("button").click(function(){
     $("#demo").toggle(1000);
   });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
.box {
   background: #ffbccb;
   padding: 15px;
   border: 1px solid gainsboro;
   border-radius: 4px;
   margin: 10px 0px;
}
</style>
</head>
<body>

<button>Toggle DIV</button>

<div class="box" id='demo'>Tekan tombol diatas</div>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
$(function(){
   $("button").click(function(){
     $("#demo").toggle(1000);
   });
});
</script>

</body>
</html>
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.