Cara Membuat Konten Expander dengan jQuery

Cara Membuat Konten Expander dengan jQuery - jQuery telah memberikan kemudahan bagi semua developer untuk membuat suatu efek ataupun animasi pada sebuah elemen. Baik animasi yang dibuat sederhana maupun yang sangat menarik dan dinamis. Dengan jQuery kita bisa membuat berbagai macam animasi dan efek, seperti tutorial berikut yang akan saya bagikan yakni bagaimana Cara Membuat Konten Expander dengan jQuery. simak langkah - langkah nya berikut ini.

Kode HTML

Pada kasus yang akan kita buat kali ini, ada beberapa langkah yang harus di perhatikan. Langkah pertama yaitu kita buat konten expander nya terlebih dahulu dengan kode HTML seperti berikut.

<section>
  <h2 class="expander">
      Expander
      <div class="arrow-down"></div>
  </h2>
  <div class="container">
    <div class="content">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </div>
</section>

Kode CSS

Setelah membuat kerangka HTML seperti diatas, selanjutnya kita akan mendesain tampilan expander dengan kode CSS seperti berikut.

* { box-sizing: border-box; }

body {
  margin:0;
  font-size:16px;
  font-family:'Open Sans', sans-serif;
}

header {
  float:left;
  width:100%;
  padding:5em 20% 2em;
  background:#14b5d1;
  margin-bottom:1em;
}

header a {
  color:#56dcee;
  opacity:0.5;
  text-decoration:none;
}

header a:hover {
  color:#333;
  opacity:1;
}


section {
  margin:3em 20%;
}


h2 {
  font-family:'Maven Pro', sans-serif;
  margin:0;
  font-weight:500;
  color:#56dcee;
}

p {
  padding:0 1em;
  font-size:1em;
  text-align: justify;
  color: #218c74;
}

html {
  overflow-y: scroll;
}

.container, 
.content, 
.expander, 
.arrow-down, 
.toggle-all span { 
  transition:all .22s linear;
}

.expander {
  width:100%;
  background:#218c74;
  color:rgba(255,255,255,0.8);
  padding:1em;
  float:left;
  cursor:pointer;
  position:relative;
  border-radius: 15px 15px 0 0;
}

.active .arrow-down {
  transform: rotate(180deg);
}
        
.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(255,255,255,0.8);
  position:absolute;
  right: 1.5em;
  top: 1.5em;
}

.expander:hover .arrow-down {
  border-top: 8px solid rgba(255,255,255,1);
}

.container {
  float:left;
  width:100%;
  overflow:hidden;
  background:#f7f1e3;
  margin-bottom:2em;
}

.content {
  margin-top:-100%;
}
.container.open .content {
  margin-top:0;
}

Kode jQuery

Selanjutnya adalah membuat fungsi agar konten expander bisa berfungsi dengan baik, yakni kita akan buat dengan jQuery, silahkan ketikan kode jQuery seperti berikut.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
    $(document).ready(function(){
        $(".expander").click(function() {
          $(this).next().toggleClass("open");
          $(this).toggleClass("active");
        });
    });
</script>

Setelah semua sintak HTML, CSS dan jQuery telah diketikan, silahkan simpan file nya, kemudian kalian bisa melihat hasil akhir nya di browser masing - masing. Maka hasil nya akan terlihat seperti pada gambar berikut.

Cara Membuat Konten Expander dengan jQuery

Baiklah, cukup sekian tutorial tentang bagaimana Cara Membuat Konten Expander dengan jQuery, semoga bermanfaat. Sampai jumpa di tutorial selanjutnya :)

20 Juni 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat