Fungsi Toggle Pada Jquery UI dan langkah pembuatannya

Halo teman-teman, apa kabar semuanya. Semoga semua sehat selalu dan memiliki hati yang gembira, berjumpa lagi dengan saya. Pada artikel kali ini kita akan mempraktekkan Fungsi Toggle Pada Jquery UI dimana ada satu fungsi yaitu fungsi “fold” untuk memberikan togel lebih atraktive. Jika di klik tombol maka toggle akan melakukan slide dengan urutannya. Oke langsung saja teman-teman siapkan code editornya dan copy script dibawah ini

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle</title>
  <style>
  div {
    height: 300px;
    width: 500px;
    background: orange;
    border: 1px solid #000;
  }
  </style>
</head>
<body>
<center>
  <button>Klik Togle</button>
  <div></div>
</center>
</body>
</html>

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

Langkah berikutnya kita berikan fungsi Jquery nya, teman-teman jangan lupa sertakan atau tambahkan library Jquery dan Jquery UI nya di dalam tag <head>

<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 tinggal kita berikan fungsi togle nya

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

Save dan refreas pada browser, klik pada tombol. Maka ketika di klik toggle akan menjalankan fungsinya dengan mengecil dan menghilang lalu secara otomatis akan membesar kembali seperti semua. Nah kita berikan sedikit modifikasi dengan fungsi “fold” supaya tombol lebih berguna, toggle akan dikendalikan oleh tombolnya. Teman-teman tambahkan fungsi “fold” nya

Kemudian save dan refreas pada browsernya, dan tekan pada tombol. Maka jika diklik tombol baru akan melakukan slide toggle nya dan otomatis sudah tidak berfungsi lagi dengan kita berikan fungsi “fold” jadi tombol lebih berguna dengan keberadaannya. Baik sekian dulu di artikel tentang Fungsi Toggle Pada Jquery UI sampai jumpa di artikel berikutnya. Semoga bermanfaat untuk tambahan pengetahuannya didalam mempelajari fungsi-fungsi Jquery atau Jquery UI. Terimakasih

Baca juga artikel tentang Cara Membuat List Input Menggunakan HTML5

Fungsi Toggle Pada Jquery UI

Kategori