Fermer question à l'ouverture d'une autre (FAQ)

Permet de fermer un accordéon au sein d'une FAQ quand on clique sur une nouvelle question

Language: Javascript

Catégorie : Utilities

<script>

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[js-faq-collapse="true"]').forEach(function (element) {
    element.addEventListener('click', function () {
      if (!element.classList.contains('open')) {
        document.querySelectorAll('[js-faq-collapse="true"].open').forEach(function (item) {
          item.click();
        });
        element.classList.add('open');
      } else {
        element.classList.remove('open');
      }
    });
  });
  const defaultFaq = document.querySelector('[js-faq-default="true"]');
  if (defaultFaq) {
    defaultFaq.click();
  }
});

</script>

Sommaire

Utiliser un LLM pour résumer ou expliquer ce script

Le script

Ajouter le script sur la page ou le projet Webflow

<!-- Scripts by Justa | FAQ -->
<script src="https://cdn-scripts.justa.fr/dist/util/faq.js"></script>

Les attributes

DIV - Identifier le wrapper de chaque FAQ Question

Nom

js-faq-collapse

Valeur

true

Ajouter l'attribute js-faq-collapse avec la valeur true à chacun des wrappers des questions

‍DIV - Identifier le wrapper de chaque FAQ Question (comme l'attribute précédent) OPTIONNEL

Nom

js-faq-default

Valeur

true

Ajouter l'attribute js-faq-default avec la valeur true si vous souhaitez qu'une des FAQ soit ouverte au chargement de la page.

Fermer question à l'ouverture d'une autre (FAQ) : Tutoriel

Template

Code source du script

<script>

document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('[js-faq-collapse="true"]').forEach(function (element) {
    element.addEventListener('click', function () {
      if (!element.classList.contains('open')) {
        document.querySelectorAll('[js-faq-collapse="true"].open').forEach(function (item) {
          item.click();
        });
        element.classList.add('open');
      } else {
        element.classList.remove('open');
      }
    });
  });
  const defaultFaq = document.querySelector('[js-faq-default="true"]');
  if (defaultFaq) {
    defaultFaq.click();
  }
});

</script>