Comment afficher et masquer des éléments au clic dans Webflow ?

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher et masquer des éléments au clic dans Webflow, avec les interactions natives ou du JavaScript.

Exemple

Méthode 1 : Interactions Webflow

Sélectionnez le bouton déclencheur. Dans Interactions, créez un trigger Mouse click (tap). Ajoutez l'action Display sur l'élément cible, avec l'option Toggle. C'est la méthode la plus rapide pour un cas simple.

Méthode 2 : JavaScript avec classList.toggle

Pour des cas plus complexes (plusieurs éléments, animations CSS), utilisez cette approche :

document.querySelector('.toggle-btn').addEventListener('click', function() {
  document.querySelector('.toggle-content').classList.toggle('visible');
  this.classList.toggle('active');
});

Avec le CSS correspondant :

.toggle-content { display: none; }
.toggle-content.visible { display: block; }
.toggle-btn.active { background: #333; color: #fff; }

Conclusion

Afficher/masquer au clic est l'une des interactions les plus utilisées. Cas d'usage :

• Afficher plus de détails sur une carte produit
• Montrer/cacher un formulaire supplémentaire
• Toggles de filtres sur une page listing