fix accordeons

scripts/films.js

@@ -12,11 +12,13 @@ function remplissage(EPISODES){
             <section class="resultat accordeon_item">
                 <h1 class="accordeon_item_header">${EPISODES.results[index].title}</h1>
                 <div class="accordeon_item_body">
+                    <div class="column1">
                         <p class= "episode">Episode :  ${EPISODES.results[index].episode_id}</p>
                         <p class= "directeur">Directeur : ${EPISODES.results[index].director}</p>
                         <p class= "producteur">Producteur : ${EPISODES.results[index].producer}</p>
                         <p class= "sortie">Date de Sortie : ${EPISODES.results[index].release_date}</p>
                     </div>
+                </div>
             </section>`
     }
     const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");

scripts/personnages.js

@@ -86,9 +86,16 @@ console.log('personnage.js loaded');
                 </div>
                 </section>`;
 
-
+    }
     //Pagination
     createPagination(previousUrl, nextUrl, PERSONNAGES, remplissage);
+
+    const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+        });
+    });
 }
 
 api_call(API_URL + "/people", remplissage);

scripts/planets.js

@@ -42,11 +42,11 @@ function remplissage(results) {
     createPagination(previousUrl, nextUrl, planetes, remplissage);
 
     const accordeonItemHeader = document.querySelectorAll(".accordeon_item_header");
-    for (item of accordeonItemHeader) {
-        item.addEventListener("click", (event) => {
-            item.classList.toggle("active");
+    accordeonItemHeader.forEach(accordeonItemHeader => {
+        accordeonItemHeader.addEventListener("click", event => {
+            accordeonItemHeader.classList.toggle("active");
+        });
     });
-    }
 }
 
 api_call(API_URL + "/planets", remplissage);