Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. JavaScript
Webdesign

Cara Membangun Komponen Accordion Dengan CSS dan Sentuhan JavaScript

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by AaliyaA (you can also view the original English article)

Dalam tutorial hari ini, kita akan belajar cara membuat komponen acara / sembunyikan dengan CSS dan sedikit JavaScript. Secara default, jQuery menyediakan metode slideToggle yang memungkinkan kita membuat akordion dengan gerakan geser. Tantangan kita adalah untuk meniru fungsi ini dengan JavaScript murni.

Inilah komponen yang akan kita buat:

Note: ini adalah functionality natively disediakan oleh <details> dan <summary> elemen, meskipun ini don’t yet enjoy support in Microsoft browsers.

1. HTML

Untuk memulainya, kita mendefinisikan elemen dengan kelas container yang berisi dua sub-elemen:

  • tombol yang akan menyembunyikan dan mengungkapkan konten (termasuk ikon SVG inline)
  • konten yang sebenarnya

Inilah yang terlihat seperti:

2 CSS.

CSS cukup mudah. Kita perlu mendefinisikan dua kelas pembantu (yaitu hide and show).

Untuk menyembunyikan dan mengungkapkan elemen target, kita akan menggunakan height property, tetapi kita tidak akan menentukan nilainya dalam CSS. Sebagai gantinya, kita akan secara dinamis menetapkan nilai ketinggian melalui JavaScript.

Satu hal yang perlu diperhatikan adalah kita tidak menggunakan display property untuk mengubah visibilitas konten kita. Properti itu tidak menghitung sendiri di antara animatable CSS properties.

Berikut adalah gaya CSS yang sesuai:

3 JavaScript.

Sekarang saatnya untuk membahas bagaimana kode JavaScript kita harus bekerja.

Pertama, ketika DOM sudah siap, kita mendapatkan ketinggian elemen .info dan kemudian segera set nilainya ke 0.

Ingatlah bahwa tergantung pada konten Anda (misalnya jika menyertakan gambar) Anda mungkin harus menyertakan kode di atas di dalam load event.

Selanjutnya, ketika .toggle-btn button diklik kita lakukan yang berikut:

  • Alihkan visibilitas dari elemen .less dan .more.
  • Hitung ulang tinggi elemen .info. Jika 0 (awalnya kita berikan nilai ini), itu artinya konten disembunyikan, jadi kita mengungkapkannya dengan menyetel tingginya sama dengan tinggi awalnya (disimpan dalam variabel infoHeight). Di sisi lain jika konten terlihat, kita menyembunyikan itu dengan mengatur ketinggian 0.
  • Secara opsional, kita memastikan bahwa .toggle-btn hanya akan diklik satu kali hingga animasi slide selesai (berlangsung 500 ms).

Berikut kode yang mengimplementasikan semua perilaku itu:

Browser Resize

Langkah selanjutnya adalah memastikan bahwa komponen akan berfungsi dengan benar saat browser window diubah ukurannya.

Berikut kode JS yang diperlukan:

4. Browser Support

Demo kita harus berfungsi dengan baik di semua browser dan devices. Juga, seperti biasa, kita menggunakan Babel untuk mengkompilasi kode ES6 ke ES5.

Kesimpulan

Dalam tutorial singkat ini kita membangun accordion-style show/hide component dengan CSS dan JavaScript. Berkat animatable height property, kita berhasil menambahkan efek slide-in/slide-out ke komponen kita.

Khususnya, kita belum mempertimbangkan aksesibilitas, jadi jika Anda ingin meningkatkan fungsi yang tentu bisa menjadi langkah berikutnya.

Tutorial Lainnya "With a Touch of JavaScript"


Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.