Fungsi ToggleClass Pada Jquery UI dan penggunaanya

Halo teman-teman berjumpa lagi dengan saya, di artikel sebelumnya kita sudah membahas beberapa fungsi dari Jquery UI. Pada artikel kali ini kita akan menggunakan Fungsi ToggleClass Pada Jquery UI kita akan membuat kotak dan ketika kotak diklik maka color dan size akan berubah yaitu dengan menggunakan toggleClass pada Jquery UI. Baik langsung saja teman-teman siapkan code editornya lalu copy script di bawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ToggleClass</title>
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  .besar {
    width: 500px;
    height: 300px;
    background-color: orange;
  }
  </style>
</head>
<body> 
<div></div>
</body>
</html>

Lalu pastekan script di atas ini di code editornya, dan save dengan nama index.html kemudian run pada browsernya. Maka output akan menghasilkan seperti gambar di bawah ini

Langkah berikutnya kita berikan fungsi toggleClass nya, pertama-tama berikan library Jquery dan Jquery UI nya terlebih dahulu di dalam tag <head> nya, atau bisa juga copy script dibawah ini.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

Jika sudah teman-teman tambahkan fungsi Jquerynya

<script>
$( "div" ).click(function() {
  $( this ).toggleClass( "besar" );
});
</script>

Kemudian disave dan refreas pada browsernya, dan klik pada kotak maka toggleClass berhasil dibuat namun masih terlihat kurang menarik, supaya lebih menarik kita tambahkan beberapa fungsi lagi. Disini saya ingin tampilan jika di klik supaya lebih pelan atau slow maka saya tinggal berikan saja fungsi slow nya

Tampilan sudah lebih menarik, tetapi jika teman-teman ingin merubahnya lebih slow lagi tinggal tambahkan saja kecepatannya, coba saya akan ganti slow menjadi 1000s

Maka tampilan jika di klik lebih soft, mudah sekali ya teman-teman. Oke mungkin sekian dulu di artikel ini tentang Fungsi ToggleClass Pada Jquery UI semoga bermanfaat dan menjadi inspirasi. Teman-teman juga bisa memodifikasinya sendiri ya dari contoh diatas agar lebih mantap dalam mempelajari beberapa fungsi dari Jquery UI. Sampai jumpa di artikel berikutnya

Terimakasih, indahnya berbagi 🙂

Baca juga artikel tentang Cara Nonaktifkan Link Dengan CSS

Fungsi ToggleClass Pada Jquery UI

Kategori