Contoh kasus Menggunakan Methode toggleClass

toggleClass itu kita ibaratkan dimana ketika kita mengklik suatu tombol dimana tombol itu menghasilkan suatu efek, misal efek tag paragraf berubah menjadi warna hijau misal, dan ketika kita klik lagi warna itu akan hilang dan berubah menjadi warna yang sebelumnya, seperti itu, dan untuk contoh kasus menggunakan methode toggleClass disini seperti apa simak terus ya teman-teman.

jadi untuk contoh kasus menggunakan methode toggleClass kita tidak akan bermain dengan warna, disini kita akn mencoba melihat semua teks yang ada di dalam suatu kotak, dimana kotak itu ketika kita mengklik buttonnya, kotak pengurung teks itu akan terbuka secara perlahan kebawah dan menampilkan isi teks yang ada di dalamnya secara perlahan.

dan untuk contoh kasus menggunakan methode toggleClass, juga saya menggunakan jqueryui ya, oke sekarang langsung saja contohnya, disini karena kita menggunakan jqueryui jangan lupa link-link CDNnya harus kita pasang di head seperti ini:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh kasus Menggunakan Methode toggleClass </title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  .....
</head>

oke jika sudah saya membuat templatenya seperti ini:

<div class="toggler">
  <div id="effect" class="newClass ui-corner-all">
      Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.
  </div>
  <button id="button" class="ui-state-default ui-corner-all">Lihat Semua Teks</button>
</div>

dan disini saya juga menggunakan CSS internal, untuk CSSnya saya gunakan seperti ini:

<style>
.toggler { width: 500px; height: 200px; position: relative;}
#button { padding: 20px; text-decoration: none; }
#effect {position: relative;  width: 240px;  padding: 1em; letter-spacing: 0; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; overflow: hidden; float: left;}
.newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; font-size: 1.6em; }
</style>

oke jika sudah sekarang kita masuk ke scriptnya dan link jquery min js, jquery-ui nya, seperti ini:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
  $( "#button" ).on( "click", function() {
    $( "#effect" ).toggleClass( "newClass", 1000 );
  });
});
</script>

oke, jadi caranya cukup simple dimana jika kita klik tombol tersebut effect akan di berikan css newClass dengan kecepatan 1000, jadi aka seperti ini gambar sebelum dan sesudah di klik:

sebelum

sesudah

Oke apakah hasil teman-teman seperti itu, jika tidak dan kira-kira ada yang mau di tanyakan silahkan saja ya tanya pada kolom komentar di bawah ini, dan saya rasa cukup sampai disini belajar kita tentang contoh kasus menggunakan methode toggleClass, semoga bermanfaat dan sampai jumpa pada artikel berikutnya, terimakasih.

Contoh kasus Menggunakan Methode toggleClass

Kategori