Fungsi slideToggle() dalam jQuery

slideToggle()

Adalah fungsi jQuery yang berfungsi untuk menampilkan atau menyembunyikan elemen dengan gerakan sliding.

Syntax:

$(‘selector’).slideToggle()

Contoh:

Buatlah satu file bernama slidetoggle.html dengan isi seperti dibawah ini:

<html> 

<head>

<title>Belajar Fungsi slideToggle() dalam jQuery</title>

<style>

.merah{

color:red;

}

</style>

<script type=”text/javascript” src=”jquery_1.6.js”></script>
<script type=”text/javascript”>

$(document).ready(function(){

$(‘#tekan’).click(function(){

$(“li.merah”).slideToggle();

})

})

</script>
</head>

<body>

<button id=”tekan”>Klik Tombol ini</button>

<ul>

<li>Pepaya</li>

<li>Mangga</li>

<li>Jeruk</li>
<li>Alpukat</li>

<li >Sirsak</li>

</ul>

 

</body>

</html>

Keterangan:

  • $(‘#tekan’).click(function(){, kode ini berarti jika elemen yang mempunyai id=”tekan” diklik maka akan menjalankan fungsi.
  • $(“li.merah”).slideToggle(); Kode ini berarti elemen ‘li’ yang mempunyai class=”merah” akana dikenakan fungsi slideToggle().

Hasil:

Buka file slidetoggle.html melalui browsermu, lalu tekan tombolnya, lihat apa yang terjadi.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura‘.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *