LUXEE HELPS
Halaman Terlalu Panjang? Rapikan Tanya-Jawab dengan Interactive FAQ Accordion!
📌 Apa itu Interactive FAQ Accordion?
Interactive FAQ Accordion adalah modul tanya-jawab interaktif berbasis sistem lipat (accordion). Pertanyaan yang diklik akan membuka jawaban dengan animasi luncur halus (smooth transition) dan secara otomatis melipat pertanyaan lain agar halaman undangan tetap rapi dan tidak melelahkan saat dibaca di smartphone.
Menuliskan 5 sampai 10 penjelasan teknis secara terbuka (misal: syarat pakaian, cara masuk ruang Zoom, refund tiket) membuat halaman menjadi sangat panjang dan melelahkan. Modul accordion ini menghemat 70% ruang vertikal layar HP dan menyajikan jawaban hanya saat dibutuhkan oleh pengunjung.
✨ Keunggulan Modul Accordion
- Smooth Height Transition (60 FPS): Animasi buka-tutup mulus tanpa patah-patah.
- Auto-Close Inactive Items: Membuka satu pertanyaan otomatis menutup pertanyaan lain.
- Zero External Library: Tidak memerlukan jQuery atau plugin tambahan yang memberatkan kecepatan web.
💻 Kode Sumber Lengkap (HTML + CSS + JS)
<!-- KONTAINER ACCORDION FAQ -->
<div class="luxee-faq-container">
<div class="luxee-faq-item active">
<button type="button" class="luxee-faq-question">
<span>Apakah acara ini terbuka untuk umum?</span>
<span class="faq-icon">+</span>
</button>
<div class="luxee-faq-answer">
<p>Ya, acara ini terbuka untuk seluruh kalangan masyarakat umum yang telah melakukan pendaftaran dan konfirmasi kehadiran melalui formulir di halaman ini.</p>
</div>
</div>
<div class="luxee-faq-item">
<button type="button" class="luxee-faq-question">
<span>Bagaimana jika saya berhalangan hadir setelah mendaftar?</span>
<span class="faq-icon">+</span>
</button>
<div class="luxee-faq-answer">
<p>Anda dapat melakukan konfirmasi pembatalan atau pengalihan tiket paling lambat H-2 sebelum acara dimulai melalui kontak panitia WhatsApp yang tertera.</p>
</div>
</div>
<div class="luxee-faq-item">
<button type="button" class="luxee-faq-question">
<span>Apakah peserta akan mendapatkan e-sertifikat resmi?</span>
<span class="faq-icon">+</span>
</button>
<div class="luxee-faq-answer">
<p>Benar, seluruh peserta yang mengikuti rangkaian sesi hingga selesai berhak mengunduh sertifikat digital terverifikasi melalui email yang didaftarkan.</p>
</div>
</div>
</div>
<style>
.luxee-faq-container {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 720px;
margin: 0 auto;
}
.luxee-faq-item {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(194, 155, 100, 0.2);
border-radius: 8px;
overflow: hidden;
transition: all 0.3s ease;
}
.luxee-faq-item.active {
border-color: #C29B64;
background: rgba(255, 255, 255, 0.07);
}
.luxee-faq-question {
width: 100%;
padding: 16px 20px;
display: flex;
justify-content: space-between;
align-items: center;
background: transparent;
border: none;
color: #F4F1EA;
font-weight: 600;
font-size: 1rem;
text-align: left;
cursor: pointer;
}
.faq-icon {
font-size: 1.3rem;
color: #C29B64;
transition: transform 0.3s ease;
}
.luxee-faq-item.active .faq-icon {
transform: rotate(45deg);
color: #E28D75;
}
.luxee-faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
padding: 0 20px;
color: #C4C0B5;
font-size: 0.9rem;
line-height: 1.6;
}
.luxee-faq-item.active .luxee-faq-answer {
max-height: 200px;
padding: 0 20px 18px 20px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const items = document.querySelectorAll('.luxee-faq-item');
items.forEach(item => {
const questionBtn = item.querySelector('.luxee-faq-question');
questionBtn.addEventListener('click', function() {
const isActive = item.classList.contains('active');
items.forEach(i => i.classList.remove('active'));
if (!isActive) {
item.classList.add('active');
}
});
});
});
</script>🔗 Modul Panduan Terkait
Langkah berikutnya dalam penambahan fitur interaktif:
💡 Pertanyaan Sering Ditanya (FAQ)
Cukup gandakan satu blok <div class="luxee-faq-item">...</div> dan ubah teks pertanyaan serta jawabannya sesuai kebutuhan.
Bisa. Hapus baris items.forEach(i => i.classList.remove('active')); pada skrip JavaScript di atas agar accordion tidak menutup pertanyaan lain saat item baru diklik.
Pada baris CSS .luxee-faq-item.active .luxee-faq-answer, naikkan nilai max-height: 200px; menjadi max-height: 500px;.