Cum să construiești un sistem FAQ interactiv cu HTML, CSS și JavaScript

Design CSS și comportament responsive

• Layout adaptabil pentru mobil și desktop prin @media queries
• 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() și removeClass() – adaugă sau elimină una sau mai multe clase
• FAQ.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 ::before din CSS cu getComputedStyle()
• 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-group este vizibil în viewport
• Aplică clasa .faq-category-selected pe 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