max-height presentation en js

web/themes/custom/quartiers_de_demain/dist/assets/bundle.js

@@ -605,35 +605,74 @@ document.addEventListener('DOMContentLoaded', function () {
 
   if (!pres) return;
 
+  // On s’assure que le bloc est animé via max-height
+  pres.style.overflow = 'hidden';
+  pres.style.maxHeight = '0px';
+
   // Création du bouton
   const btn = document.createElement('button');
   btn.className = 'btn-equipe-toggle';
   btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
-  btn.setAttribute('aria-expanded', false);
+  btn.setAttribute('aria-expanded', 'false');
 
   // Insertion du bouton juste après le bloc présentation
   pres.insertAdjacentElement('afterend', btn);
 
-  // 3. Ajout de la ligne après le bouton
+  // Ligne de séparation après le bouton
-const separator = document.createElement('div');
+  const separator = document.createElement('div');
-separator.className = 'equipe-separator';
+  separator.className = 'equipe-separator';
-btn.insertAdjacentElement('afterend', separator);
+  btn.insertAdjacentElement('afterend', separator);
+
+  function openPanel() {
+    pres.classList.add('is-open');
+    if (photo) photo.classList.add('is-open');
+
+    // On force le navigateur à appliquer la classe avant de mesurer
+    requestAnimationFrame(() => {
+      // S’assurer que le bloc n’est pas en display:none via le CSS
+      // Si tu veux être ultra safe :
+      pres.style.maxHeight = 'none'; // on enlève l’ancienne contrainte
+      const h = pres.scrollHeight;   // hauteur réelle du contenu
+      pres.style.maxHeight = '0px';  // on repart de 0 pour l’animation
+
+      requestAnimationFrame(() => {
+        pres.style.maxHeight = h + 'px';
+      });
+    });
+
+    btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
+    btn.setAttribute('aria-expanded', 'true');
+  }
+
+  function closePanel() {
+    // Hauteur actuelle (contenu visible)
+    const h = pres.scrollHeight;
+    pres.style.maxHeight = h + 'px';
+
+    requestAnimationFrame(() => {
+      pres.style.maxHeight = '0px';
+      pres.classList.remove('is-open');
+      if (photo) photo.classList.remove('is-open');
+    });
+
+    btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
+    btn.setAttribute('aria-expanded', 'false');
+  }
 
   // Toggle
   btn.addEventListener('click', function () {
-    const isOpen = pres.classList.toggle('is-open');
+    const isOpen = btn.getAttribute('aria-expanded') === 'true';
 
-    if (photo) photo.classList.toggle('is-open');
+    if (isOpen) {
-
+      closePanel();
-    btn.textContent = isOpen
+    } else {
-      ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
+      openPanel();
-      : "EN SAVOIR PLUS SUR L'ÉQUIPE";
+    }
-
-    btn.setAttribute('aria-expanded', isOpen);
   });
 
 });
 
+
 //////////////end toggle page node projet //////////////////
 
 

web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css

@@ -4478,7 +4478,6 @@ body {
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_photo.is-open,
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .field_field_equipe_presentation.is-open {
-  max-height: 1500px;
   opacity: 1;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle {
@@ -4492,6 +4491,7 @@ body {
   margin: auto;
   display: flex;
   border: none;
+  margin-top: 1rem;
   margin-bottom: 1rem;
 }
 .node-type-projet .layout--threecol-25-50-25 .layout__region--second .block-region-second .btn-equipe-toggle svg {

web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js

@@ -547,35 +547,74 @@ document.addEventListener('DOMContentLoaded', function () {
 
   if (!pres) return;
 
+  // On s’assure que le bloc est animé via max-height
+  pres.style.overflow = 'hidden';
+  pres.style.maxHeight = '0px';
+
   // Création du bouton
   const btn = document.createElement('button');
   btn.className = 'btn-equipe-toggle';
   btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
-  btn.setAttribute('aria-expanded', false);
+  btn.setAttribute('aria-expanded', 'false');
 
   // Insertion du bouton juste après le bloc présentation
   pres.insertAdjacentElement('afterend', btn);
 
-  // 3. Ajout de la ligne après le bouton
+  // Ligne de séparation après le bouton
-const separator = document.createElement('div');
+  const separator = document.createElement('div');
-separator.className = 'equipe-separator';
+  separator.className = 'equipe-separator';
-btn.insertAdjacentElement('afterend', separator);
+  btn.insertAdjacentElement('afterend', separator);
+
+  function openPanel() {
+    pres.classList.add('is-open');
+    if (photo) photo.classList.add('is-open');
+
+    // On force le navigateur à appliquer la classe avant de mesurer
+    requestAnimationFrame(() => {
+      // S’assurer que le bloc n’est pas en display:none via le CSS
+      // Si tu veux être ultra safe :
+      pres.style.maxHeight = 'none'; // on enlève l’ancienne contrainte
+      const h = pres.scrollHeight;   // hauteur réelle du contenu
+      pres.style.maxHeight = '0px';  // on repart de 0 pour l’animation
+
+      requestAnimationFrame(() => {
+        pres.style.maxHeight = h + 'px';
+      });
+    });
+
+    btn.textContent = "FERMER LA PRÉSENTATION DE L'ÉQUIPE";
+    btn.setAttribute('aria-expanded', 'true');
+  }
+
+  function closePanel() {
+    // Hauteur actuelle (contenu visible)
+    const h = pres.scrollHeight;
+    pres.style.maxHeight = h + 'px';
+
+    requestAnimationFrame(() => {
+      pres.style.maxHeight = '0px';
+      pres.classList.remove('is-open');
+      if (photo) photo.classList.remove('is-open');
+    });
+
+    btn.textContent = "EN SAVOIR PLUS SUR L'ÉQUIPE";
+    btn.setAttribute('aria-expanded', 'false');
+  }
 
   // Toggle
   btn.addEventListener('click', function () {
-    const isOpen = pres.classList.toggle('is-open');
+    const isOpen = btn.getAttribute('aria-expanded') === 'true';
 
-    if (photo) photo.classList.toggle('is-open');
+    if (isOpen) {
-
+      closePanel();
-    btn.textContent = isOpen
+    } else {
-      ? "FERMER LA PRÉSENTATION DE L'ÉQUIPE"
+      openPanel();
-      : "EN SAVOIR PLUS SUR L'ÉQUIPE";
+    }
-
-    btn.setAttribute('aria-expanded', isOpen);
   });
 
 });
 
+
 //////////////end toggle page node projet //////////////////
 
 

web/themes/custom/quartiers_de_demain/src/assets/scss/pages/node-type-projet.scss

@@ -207,7 +207,7 @@
                 
                 .field_field_equipe_photo.is-open,
                 .field_field_equipe_presentation.is-open {
-                  max-height: 1500px;
+                //   max-height: 1500px;
                   opacity: 1;
                 }
                 
@@ -222,8 +222,8 @@
                     margin: auto;
                     display: flex;
                     border: none;
-                    // padding-top: 0.3rem;
+                    margin-top: 1rem;
-                    // padding-bottom: 0.3rem;
+
                     svg{
                         display: none;
                     }
@@ -232,7 +232,6 @@
                         content: url("../img/arrow-down-white.svg");
                         padding-right: 0.2rem;
                         padding-left: 0.2rem;
-                        // padding-bottom: 0.2rem;
                         height: 12px;
                     }
                     margin-bottom: 1rem;
@@ -240,6 +239,7 @@
                 }
                 .btn-equipe-toggle[aria-expanded="true"]::after {
                     content: url("../img/arrow-up-white.svg");
+                   
                 }
                 .equipe-separator {
                     border-bottom: 1px solid black;