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.jsdelivr.net/npm/@justaa/scripts/dist/util/faq.js"></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>

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.

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Nom

Valeur

Tuto

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>