Cum să construiești un sistem FAQ interactiv cu HTML, CSS și JavaScript
Sistemul FAQ interactiv este o componentă modernă ideală pentru site-uri informaționale, aplicații educaționale sau proiecte web care solicită răspunsuri rapide și organizate. Cu o structură modulară HTML, stilizare responsive CSS și comportamente animate JavaScript, poți crea o experiență fluidă și intuitivă pentru utilizator.
Structura HTML
Markup-ul este format din două părți principale:
.faq-categories– un meniu lateral cu linkuri către fiecare topic.faq-items– un panou care conține întrebările și răspunsurile grupate logic
Fiecare întrebare este definită într-un , iar conținutul răspunsului într-un .faq-response cu bloc .text-block uniformizat pentru consistență.
Design CSS și comportament responsive
- Layout adaptabil pentru mobil și desktop prin
@mediaqueries - Panou FAQ animat pe mobil cu
.faq-items--slide-in - Fundal transparent activat prin
.faq-overlay--is-visible - Comportament hover și selecție pe linkuri prin
.faq-category - Închidere panou cu
.faq-close-item— un X construit din pseudo-elemente
Pe desktop, grupurile sunt afișate static. Pe mobil, interacțiunile sunt animate cu transformări CSS și fundal de tip overlay.
JavaScript explicat pas cu pas
Scriptul JavaScript al acestui sistem FAQ este auto-invocat și modular, organizat în două componente principale:
- FAQ – un obiect cu funcții utilitare
- FAQComponent – constructorul care controlează interacțiunile
Funcții utilitare: manipularea claselor și animații
FAQ.hasClass()– verifică dacă elementul are o clasăFAQ.addClass()șiremoveClass()– adaugă sau elimină una sau mai multe claseFAQ.toggleClass()– comută starea unei clase în funcție de un boolean
Aceste funcții sunt fundamentul pentru modificările vizuale și interactive ale elementelor din interfață.
Animație de înălțime: FAQ.setHeight()
- Rulează o tranziție de înălțime fluidă între două valori folosind
requestAnimationFrame - Utilizată la expandarea și restrângerea răspunsurilor în secțiunile de întrebare
Scroll animat: FAQ.scrollTo()
Pe desktop, când utilizatorul face click pe o categorie, pagina face scroll cu animație până la grupul respectiv:
- Calculul începe de la
window.scrollY - Se folosește
Math.easeInOutQuad()pentru tranziție naturală - Durata este personalizabilă (în cod: 200ms)
Detecție dispozitiv: getMode()
Funcția detectează dacă interfața este afișată pe mobil sau desktop:
- Se citește
::beforedin CSS cugetComputedStyle() - Returnează
'mobile'sau'desktop'în funcție de layout - Permite scriptului să aplice comportamente diferite
Constructorul FAQComponent și inițializare
Este clasa principală care controlează interacțiunile cu componentele FAQ:
- Definește grupuri de întrebări, overlay, container și linkuri
- Metoda
init()atașează toate evenimentele: click pe întrebare, categorie, scroll tracking etc. - Metoda
closePanel()ascunde panoul mobil și overlay-ul
Scroll tracking automat
Pe desktop, scriptul actualizează automat categoria activă în funcție de poziția de scroll:
- Verifică ce grup
.faq-groupeste vizibil în viewport - Aplică clasa
.faq-category-selectedpe linkul asociat - Asigură o experiență de navigare intuitivă și fluidă
Extensibilitate și personalizare
- Poate fi integrat ușor într-un CMS sau framework
- Stilizare CSS modulară cu posibilitate de temare (light/dark)
- Se pot adăuga filtre, căutare live, sau animații extra
- JavaScript poate fi convertit în modul ES6 sau TypeScript
Sistemul poate deveni parte dintr-o bibliotecă UI, iar codul să fie extins cu funcționalități complexe precum live search, indexare sau localizare.
Concluzie
Acest sistem FAQ interactiv demonstrează cum se poate construi o componentă web elegantă și responsivă fără librării externe. HTML-ul este semantic, CSS-ul este adaptabil și JavaScript-ul modular oferă animații fluide și o experiență intuitivă. Descarcă arhiva
Fii primul care comenteaza!