Créer une Page de FAQ Réactive avec HTML, CSS et JavaScript

Introduction

Créer une page de FAQ (Foire Aux Questions) est une tâche essentielle pour améliorer l’expérience utilisateur sur un site web. Dans cet article, nous allons explorer comment construire une page de FAQ réactive en utilisant HTML, CSS et JavaScript. Que vous soyez un développeur front-end débutant ou que vous souhaitiez renforcer vos compétences, ce guide vous fournira des conseils pratiques et des exemples concrets.

1. Structure de base en HTML

Pour commencer, nous allons créer la structure de notre page FAQ en HTML. Voici un exemple simple :

<div class="faq-container">
    <h1>Questions Fréquemment Posées</h1>
    <div class="faq-item">
        <h2 class="faq-question">Quelle est la politique de retour ?</h2>
        <p class="faq-answer" style="display:none;">Notre politique de retour est de 30 jours.</p>
    </div>
    <div class="faq-item">
        <h2 class="faq-question">Comment puis-je contacter le support ?</h2>
        <p class="faq-answer" style="display:none;">Vous pouvez nous contacter par email ou via le chat en direct.</p>
    </div>
</div>

Dans cet exemple, chaque question est contenue dans un élément div avec une classe faq-item. Les réponses sont initialement cachées grâce à l’attribut style="display:none;".

2. Styliser avec CSS

Pour rendre notre FAQ visuellement attrayante, nous allons ajouter quelques styles CSS :

.faq-container {
    width: 80%;
    margin: auto;
}

.faq-item {
    border: 1px solid #ccc;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
}

.faq-question {
    cursor: pointer;
    color: #007BFF;
}

.faq-answer {
    margin-top: 10px;
}

Ces styles donneront à notre FAQ une apparence propre et professionnelle, tout en rendant les questions cliquables.

3. Interaction avec JavaScript

Pour rendre notre FAQ interactive, nous allons utiliser JavaScript pour afficher ou masquer les réponses lorsque l’utilisateur clique sur une question. Voici un exemple de code :

const questions = document.querySelectorAll('.faq-question');

questions.forEach(question => {
    question.addEventListener('click', () => {
        const answer = question.nextElementSibling;
        answer.style.display = answer.style.display === 'none' ? 'block' : 'none';
    });
});

Ce code ajoute un événement de clic à chaque question. Lorsqu’une question est cliquée, la réponse associée est affichée ou masquée.

Conclusion

Créer une page de FAQ réactive avec HTML, CSS et JavaScript est un excellent moyen d’améliorer l’expérience utilisateur sur votre site. En suivant les étapes décrites dans cet article, vous pouvez facilement mettre en place une FAQ qui répond aux besoins de vos utilisateurs. N’hésitez pas à personnaliser le style et le comportement pour l’adapter à votre projet. Bonne création !