Cara Melebarkan Tampilan Card dengan Jquery

Selamat hari jum’at di jum’at yang barakah ini saya akan sedikit bermain-main dengan toggle dimana ketika kita klik lebar dari sebah konten akan mlebar dimana menyebabkan konten yang ada di dalamnnya akan ikut bergeser menyesuaikan lebar pembungkus yang kita berikan effectnya, oke bagaimana cara membuat cara melebarkan tampilan card dengan Jquery, simak terus ya teman-teman.

Caranya cukup simple teman-teman di harapkan sudah mengerti ya tentang jquery karena disini saya akan mencobanya menggunakan jquery, walaupun disini saya menggunakan jquery UI tetapi disini teman-teman supaya tidak kesulitan saja membacannya kodingan yang akan kita buat nanti, dan ini lah cara melebarkan tampilan card dengan Jquery:

pertama kita linkan kita menggunakan CDN saja.

//CSS
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">


//JS
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Jika sudah sekarang kita buat templatenya, simple saja ya, disini saya membuat template simple seperti ini:

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">Dumet School</h3>
    <p>
      Kursus Website, Digital Marketing & Desain Grafis Lokasi kursus: Kelapa Gading, Grogol, Tebet, Srengseng, dan Depok.
      Jadwal kursus fleksibel
      Satu murid langsung mulai
      Belajar sampai bisa
      Konsultasi gratis seumur hidup
    </p>
  </div>
</div>
 
<button id="button" class="ui-state-default ui-corner-all">Lebih Lebar</button>

Jika sudah sekarang kita tinggal atur jquerynya seperti ini:

$( function() {
  var state = true;
  $( "#button" ).on( "click", function() {
    if ( state ) {
      $( "#effect" ).animate({
        backgroundColor: "#3f67a7",
        color: "#fff",
        width: 500
      }, 1000 );
    } else {
      $( "#effect" ).animate({
        backgroundColor: "#fff",
        color: "#000",
        width: 240
      }, 1000 );
    }
    state = !state;
  });
} );

Bagaimana jika teman-teman berhasil akan menampilkan hasil seperti ini:

sebelum dan sesudah, bisa dilihat ya, disini ketika button itu belum di klik, tampilan masih pendek ketika di klik tulisan atas akan melebar, di karenakan tag div yang kita berikan effect itu kita setting melebar, jadi tulisan yang di bawahnya jadi ikut melebar, dan silahkan teman-teman klik lagi maka akan mengecil lagi, itu adalah fungsi dari sebuah toggle, bagaimana, cukup simple ya teman-teman, dan saya rasa cukup sampai disini saja belajar kita tentang cara melebarkan tampilan card dengan Jquery, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

Cara Melebarkan Tampilan Card dengan Jquery

Kategori