Problème de javascript

[Gadine]

Bonjour,
J'ai créé un accordéon pour une FAQ avec du css et un petit code js que j'ai récupéré et ça fonctionne de façon aléatoire, parfois oui, parfois non.

Le html :

Code : Tout sélectionner

<div class="accordeon-container">
    <div class="accordeon-header">
      <p class="fa fa-angle-right">Question n°1</p>
    </div>
    <div class="accordeon-content">
      <p>Réponse à la question 1<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
 
    <div class="accordeon-header">
      <p class="fa fa-angle-right">Question n°2</p>
    </div>
    <div class="accordeon-content">
      <p>Réponse à la question 2<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>

Les css :

Code : Tout sélectionner

.accordeon-header {
  font-family: "Nunito";
  background-color: #FCF9F6;
  color: #000;
  cursor: pointer;
  padding: 13px;
  margin: 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2em;
  transition: 0.4s;
}
.accordeon-header:hover, .accordeon-header:active {
  color: #e94b4e;
}
.fa {
  display: inline-block;
  line-height: 1;
}
.fa-angle-right:before {
  content: "► ";
}
.fa-angle-down:before {
  content: "▼ ";
}
.accordeon-content {
  font-family: "Nunito";
  font-size: 1.2em;
  padding: 0;
  margin: 5px;
  background-color: #F1EBE6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

@media (max-width: 767px) {
  .accordeon-header {
    font-size: 1.2em;
  }
}

@media (min-width: 768px) {
  .accordeon-header {
    font-size: 1.2em;
  }
}

Le JS :

Code : Tout sélectionner

const headers = document.querySelectorAll(".accordeon-header");
  headers.forEach(header => {
    header.addEventListener("click", function() {
      this.classList.toggle("active");
      const content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      this.querySelector("p").classList.remove("fa-angle-down");
      this.querySelector("p").classList.add("fa-angle-right");
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      this.querySelector("p").classList.remove("fa-angle-right");
      this.querySelector("p").classList.add("fa-angle-down");
    }
  });
});

Quelqu'un pourrait-il m'aider à trouver le bug ? Un grand merci d'avance !

[webmaster]

Bonjour

En récupérant les morceaux de code, ca a l'air de fonctionner chez moi
Il faut bien mettre le JS après la création des div.accordeon

Code : Tout sélectionner

<div class="accordeon-container">
    <div class="accordeon-header">
      <p class="fa fa-angle-right">Question n°1</p>
    </div>
    <div class="accordeon-content">
      <p>Réponse à la question 1<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
 
    <div class="accordeon-header">
      <p class="fa fa-angle-right">Question n°2</p>
    </div>
    <div class="accordeon-content">
      <p>Réponse à la question 2<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</div>
<style>
.accordeon-header {
  font-family: "Nunito";
  background-color: #FCF9F6;
  color: #000;
  cursor: pointer;
  padding: 13px;
  margin: 0;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2em;
  transition: 0.4s;
}
.accordeon-header:hover, .accordeon-header:active {
  color: #e94b4e;
}
.fa {
  display: inline-block;
  line-height: 1;
}
.fa-angle-right:before {
  content: "► ";
}
.fa-angle-down:before {
  content: "▼ ";
}
.accordeon-content {
  font-family: "Nunito";
  font-size: 1.2em;
  padding: 0;
  margin: 5px;
  background-color: #F1EBE6;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

@media (max-width: 767px) {
  .accordeon-header {
    font-size: 1.2em;
  }
}

@media (min-width: 768px) {
  .accordeon-header {
    font-size: 1.2em;
  }
}
</style>
<script>

const headers = document.querySelectorAll(".accordeon-header");
  headers.forEach(header => {
    header.addEventListener("click", function() {
      this.classList.toggle("active");
      const content = this.nextElementSibling;
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      this.querySelector("p").classList.remove("fa-angle-down");
      this.querySelector("p").classList.add("fa-angle-right");
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
      this.querySelector("p").classList.remove("fa-angle-right");
      this.querySelector("p").classList.add("fa-angle-down");
    }
  });
});
</script>