Comment créer un accordéon FAQ sans librairie dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment créer un accordéon FAQ dans Webflow sans librairie externe, uniquement avec les interactions natives.

Exemple

1. Créez la structure de l'accordéon

Pour chaque item FAQ, créez un Div contenant : un Div question (cliquable) et un Div réponse (caché par défaut en display: none). Ajoutez une icône "+" ou une flèche dans le Div question.

2. Ajoutez l'interaction sur le Div question

Sélectionnez le Div question. Dans le panneau Interactions, créez un trigger Mouse click (tap). Action : afficher/masquer le Div réponse avec une transition de hauteur ou display. Utilisez l'option Toggle pour ouvrir/fermer au clic.

3. Gérez l'icône de rotation

Ajoutez une deuxième action dans la même interaction pour faire pivoter l'icône flèche : Rotate 0° → 180° au clic, avec Toggle. Cela indique visuellement l'état ouvert/fermé.

4. Gérez la fermeture des autres items (optionnel)

Pour fermer automatiquement les autres items quand un s'ouvre, ajoutez une interaction de type "Combo class" ou utilisez ce script léger :

document.querySelectorAll('.faq-question').forEach(function(q) {
  q.addEventListener('click', function() {
    const answer = q.nextElementSibling;
    document.querySelectorAll('.faq-answer').forEach(function(a) {
      if (a !== answer) a.style.display = 'none';
    });
    answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
  });
});

Conclusion

Un accordéon FAQ améliore la lisibilité et le SEO. Cas d'usage :

• Pages FAQ de site vitrine ou SaaS
• Section Q&A sur une landing page
• Documentation avec sections repliables