Tip Cepat: Cara Menyesuaikan Komponen Accordion Bootstrap 4

() translation by (you can also view the original English article)

Pada tips singkatt ini, kita akan membuat accordion Bootstrap 4, menyesuaikannya dengan beberapa perubahan CSS, dan menerapkan beberapa penyesuaian JavaScript. Ayo mulai!

Catatan: Tutorial ini mengasumsikan Anda memiliki banyak keakraban dengan Bootstrap 4.

1. Sertakan Icon Font Awesome

Untuk keperluan tutorial ini, di luar file CSS dan JavaScript Bootstrap yang diperlukan, saya juga memasukkan paket ikon Font Awesome ke dalam pena kita. Kita dapat melakukannya dengan menautkan ke Font Awesome CDN langsung dari pengaturan CSS kita:

2. Bangun Accordion Sederhana

Untuk membuat accordion kita, kita akan mengandalkan beberapa contoh kode untuk collapse component, disediakan oleh Bootstrap.

Accordion kita akan berisi tiga elemen yang dapat dilipat:

<div id="accordion" class="myaccordion">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Konten dalam item yang dapat dilipat pertama adalah sebagai berikut: div header berisi heading dan tombol, dan div kedua dengan apa pun isi body (daftar dalam hal ini).

<div class="card-header" id="headingOne">
  <h2 class="mb-0">
    <button class="d-flex align-items-center justify-content-between btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
      Undergraduate Studies
      <span class="fa-stack fa-sm">
        <i class="fas fa-circle fa-stack-2x"></i>
        <i class="fas fa-plus fa-stack-1x fa-inverse"></i>
      </span>
    </button>
  </h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
  <div class="card-body">
    <ul>
      <li>Computer Science</li>
      <li>Economics</li>
      <li>Sociology</li>
      <li>Nursing</li>
      <li>English</li>
    </ul>
  </div>
</div>

Perhatikan bahwa kita menumpuk banyak ikon di tombol kita, berkat gaya dukungan yang dibundel dengan Font Awesome.

Setelah selesai, kita kemudian menambahkan konten untuk dua item yang collapsible.

3. Tambahkan Beberapa Style Dasar

Selanjutnya kita tentukan beberapa aturan CSS untuk komponen kita. Tidak ada yang terlalu mewah, hanya beberapa warna dasar dan sizing styles untuk membuat sesuatu terlihat sedikit lebih unik.

.myaccordion {
  max-width: 500px;
  margin: 50px auto;
  box-shadow: 0 0 1px rgba(0,0,0,0.1);
}

.myaccordion .card,
.myaccordion .card:last-child .card-header {
  border: none;
}

.myaccordion .card-header {
  border-bottom-color: #EDEFF0;
  background: transparent;
}

.myaccordion .fa-stack {
  font-size: 18px;
}

.myaccordion .btn {
  width: 100%;
  font-weight: bold;
  color: #004987;
  padding: 0;
}

.myaccordion .btn-link:hover,
.myaccordion .btn-link:focus {
  text-decoration: none;
}

.myaccordion li + li {
  margin-top: 10px;
}

Kerja bagus! Sejauh ini komponen kita terlihat seperti ini:

4. Kustomisasi

Dengan HTML dan CSS di tempatnya, mari kita lihat beberapa penyesuaian berguna yang dapat kita tambahkan ke accordion kita.

Toggle Icons

Secara default, kontrol kita menyertakan ikon "plus".

Setiap kali sebuah kontrol diklik, alangkah baiknya jika ikonnya beralih antara menjadi ikon "plus" atau "minus", tergantung pada keadaan elemen yang dapat dilipat.

Untuk mencapai ini, kita dapat memanfaatkan event show.bs.collapse dan hide.bs.collapse.

Ini kode JavaScript yang diperlukan, yang mengalihkan kelas pada ikon <i> kita:

$("#accordion").on("hide.bs.collapse show.bs.collapse", e => {
  $(e.target)
    .prev()
    .find("i:last-child")
    .toggleClass("fa-minus fa-plus");
});

Dan inilah demo yang sesuai:

Tetapkan Status Default

Dalam contoh kita, semua collapsible element ditutup untuk memulai.

Tetapi katakanlah bahwa kita ingin elemen yang collapsible pertama dibuka secara default. Untuk melakukannya, kita harus menambahkan kelas show ke dalamnya, lalu pada elemen button terkait (control) kita menghapus kelas collapsed dan, untuk accessibility, set aria-extended="true".

Inilah persetujuan kita dengan perubahan yang dibuat:

Beberapa Elemen yang Collapsible Dibuka

Terkadang kita mungkin ingin agar beberapa elemen yang collapsible terbuka pada saat yang bersamaan. Kita dapat mencapai ini dengan menghapus atribut data-parent dari semua elemen yang collapsible.

Inilah demo dengan behavior itu:

Animasi Posisi

Pertimbangkan skenario berikut: bayangkan ada banyak konten di dalam elemen yang dapat dilipat. Pada titik tertentu Anda membaca teks di dalam elemen kedua, setelah itu Anda mengklik untuk melihat konten dari item ketiga yang dapat dilipat. Item kedua ditutup lagi, jadi sekarang, untuk melihat awal elemen ketiga, Anda harus menggulir kembali. Ugh, bukan UX yang bagus.

Begini tampilannya:

Salah satu perbaikan sederhana, yang mengambil keuntungan dari event yang shown.bs.collapse, adalah meluncurkan animasi gulir ke posisi teratas dari kontrol terkait.

Untuk melakukan itu kita menambahkan kode JavaScript berikut ke demo sebelumnya:

$("#accordion").on("shown.bs.collapse", e => {
  $("html, body").animate(
    {
      scrollTop: $(e.target)
        .prev()
        .offset().top
    },
    400
  );
});

Sekarang mari kita periksa lagi!

Kesimpulan

Dalam tutorial singkat ini kita bermain dengan komponen collapse Bootstrap 4, membuat beberapa contoh accordion, mencakup beberapa persyaratan umum, dan membuat beberapa solusi. Anda sekarang dapat pergi dan menerapkan pengetahuan yang diperoleh hari ini di proyek Bootstrap mendatang Anda.

Jika Anda pernah membuat ekstensi berguna lainnya untuk accordion Bootstrap, beri tahu kami di komentar di bawah.

Link yang berguna

Bootstrap 4 collapse component