Buat Akordeon Kustom - Bantuan Webflow

Cara menambahkan elemen dropdown

Elemen dropdown memiliki aksi bawaan yang membuatnya berguna sebagai akordeon kustom — elemen ini membuka daftar dropdown saat diklik dan menutupnya ketika elemen lain atau bagian halaman diklik.

Anda dapat menambahkan elemen dropdown ke situs Anda dengan pergi ke Panel Tambah (A) > Elemen > Lanjutan dan menyeret elemen dropdown ke kanvas.

Cara mengubah gaya dropdown default

Untuk menggunakan dropdown dalam akordeon kustom Anda, Anda perlu mengubah gaya elemen dropdown default. Khususnya, Anda perlu menyesuaikan lebar agar dropdown sepenuhnya mengisi ruang elemen induknya (misalnya, elemen apa pun yang menampung akordeon kustom).

Untuk mengubah gaya dropdown default:

1. Pilih elemen dropdown induk di kanvas Desainer (diberi kelas “Item Akordeon” untuk contoh ini)
2. Pergi ke Panel Gaya > Ukuran
3. Atur Lebar ke 100%

Cara menyesuaikan toggle dropdown Anda

Sekarang, Anda perlu menyesuaikan toggle dropdown Anda agar sepenuhnya mengisi elemen induknya dan menyembunyikan konten di dalam daftar dropdown saat akordeon ditutup. Sesuaikan properti tampilan dan tinggi toggle dropdown:

1. Pilih toggle dropdown di kanvas dan beri kelas (misalnya, “Toggle Akordeon”)
2. Pergi ke Panel Gaya > Tata Letak
3. Atur Tampilan ke flexbox untuk mengisi ruang horizontal
4. Atur Rata Tengah ke tengah untuk memusatkan teks secara vertikal
5. Pergi ke Panel Gaya > Ukuran
6. Atur nilai Tinggi (misalnya, 80px)

Cara Memperindah Akordeon Anda

Jika Anda melihat pratinjau situs dan mengklik akordeon Anda, Anda mungkin melihat akordeon terbuka, tetapi konten default menimpa konten di sekitarnya. Ini terjadi karena gaya posisi default untuk daftar dropdown adalah absolute. Anda perlu mengubahnya agar konten berkembang dan menggeser elemen di sekitarnya.

Untuk memperindah akordeon Anda:

1. Pilih elemen dropdown induk (misalnya, "Item Akordeon")
2. Klik ikon "roda gigi" untuk membuka Pengaturan Dropdown dan menampilkan Menu
3. Pilih elemen Daftar Dropdown
4. Buka Panel Gaya > Posisi
5. Atur Posisi ke static
6. Pilih elemen dropdown induk ("Item Akordeon")
7. Buka Panel Gaya > Ukuran
8. Atur Overflow ke hidden

Cara Membuat Animasi Kustom Anda

Buat animasi kustom yang membuka dan menutup akordeon kustom Anda:

• Buat tindakan awal
• Animasi pembukaan akordeon
• Animasi penutupan akordeon

Buat Tindakan Awal

Anda akan memulai dengan membuat dua tindakan awal untuk akordeon Anda.

Untuk dropdown Anda:

1. Pilih elemen dropdown ("Item Akordeon")
2. Buka Panel Interaksi > Pemicu Elemen dan buat pemicu elemen baru
3. Pilih Dropdown terbuka
4. Pilih tindakan di bawah Menu terbuka
5. Pilih Mulai animasi di bawah Animasi kustom
6. Buat animasi berjangka waktu dan beri nama (misalnya, "Akordeon terbuka")
7. Tambahkan tindakan ke animasi Anda: Ukuran di bawah Miscellaneous
8. Atur sebagai keadaan awal
9. Masukkan nilai tinggi (misalnya, 80px)
10. Simpan

Untuk ikon toggle Anda:

1. Pilih Ikon dalam elemen dropdown
2. Beri kelas pada ikon Anda (misalnya, "Ikon Akordeon")
3. Pilih elemen dropdown induk
4. Buka Panel Interaksi
5. Pilih interaksi Dropdown terbuka
6. Edit animasi berjangka waktu ("Akordeon terbuka")
7. Pilih ikon ("Ikon Akordeon")
8. Tambahkan tindakan: Putar di bawah Transformasi
9. Atur sebagai keadaan awal
10. Atur sumbu-z ke 0 derajat
11. Simpan

Animasi Membuka Akordeon

Untuk membuka akordeon dan memutar ikon:

1. Pilih elemen dropdown induk
2. Buka panel Interaksi
3. Pilih interaksi Dropdown terbuka
4. Edit animasi waktu (“Akordeon terbuka”)
5. Tambahkan aksi: Ukuran di bawah Lain-lain
6. Hapus centang pada status awal
7. Masukkan “auto” untuk tinggi
8. Pilih ikon (“Ikon Akordeon”)
9. Tambahkan aksi (pada waktu yang sama): Putar di bawah Transformasi
10. Atur sumbu z ke 180 derajat
11. Simpan

Animasi Menutup Akordeon

Untuk menganimasi penutupan:

1. Pilih elemen dropdown induk (“Item Akordeon”)
2. Buka panel Interaksi
3. Pilih interaksi Dropdown terbuka
4. Pilih aksi di bawah Menu menutup
5. Pilih Mulai animasi
6. Buat animasi waktu dan beri nama (misalnya, “Akordeon menutup”)
7. Tambahkan aksi: Ukuran di bawah Lain-lain
8. Masukkan nilai tinggi (misalnya, 80px)
9. Pilih ikon
10. Tambahkan aksi (waktu yang sama): Putar di bawah Transformasi
11. Atur sumbu z ke 0 derajat
12. Simpan

Kembali ke bantuan webflow