From d2abf206cf3a5e85d506e548871921635c258f2a Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Sat, 4 Apr 2026 18:56:37 -0400
Subject: [PATCH] Add slide animation to social accountability accordion

Replace instant show/hide with animated max-height transition
for smooth open/close behavior on accordion panels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 social-accountability/index.html | 57 +++++++++++++++++++++++++++++---
 1 file changed, 53 insertions(+), 4 deletions(-)

diff --git a/social-accountability/index.html b/social-accountability/index.html
index 2c1b1c0..0d75aff 100644
--- a/social-accountability/index.html
+++ b/social-accountability/index.html
@@ -972,19 +972,62 @@
   document.querySelectorAll('.elementor-counter-number').forEach(function(el){cio.observe(el)});
 })();
 </script>
+<style>
+.collapse {
+  display: none;
+  overflow: hidden;
+}
+.collapse.animating {
+  display: block;
+  transition: max-height 0.3s ease;
+  overflow: hidden;
+}
+.collapse.in {
+  display: block;
+}
+</style>
 <script>
 (function(){
+  function slideDown(el, cb){
+    el.classList.remove('in');
+    el.classList.add('animating');
+    el.style.maxHeight = '0px';
+    // Force reflow
+    el.offsetHeight;
+    el.style.maxHeight = el.scrollHeight + 'px';
+    el.addEventListener('transitionend', function handler(){
+      el.removeEventListener('transitionend', handler);
+      el.classList.remove('animating');
+      el.classList.add('in');
+      el.style.maxHeight = '';
+      if(cb) cb();
+    });
+  }
+  function slideUp(el, cb){
+    el.style.maxHeight = el.scrollHeight + 'px';
+    el.classList.remove('in');
+    el.classList.add('animating');
+    // Force reflow
+    el.offsetHeight;
+    el.style.maxHeight = '0px';
+    el.addEventListener('transitionend', function handler(){
+      el.removeEventListener('transitionend', handler);
+      el.classList.remove('animating');
+      el.style.maxHeight = '';
+      if(cb) cb();
+    });
+  }
   document.querySelectorAll('[data-ekit-toggle="collapse"]').forEach(function(btn){
     btn.addEventListener('click', function(e){
       e.preventDefault();
       var target = document.querySelector(btn.getAttribute('data-target'));
       if(!target) return;
-      var isOpen = target.classList.contains('show');
-      // Close all siblings in same accordion
+      var isOpen = target.classList.contains('in');
       var parent = target.closest('.elementskit-accordion');
       if(parent){
         parent.querySelectorAll('.collapse.in').forEach(function(el){
-          el.classList.remove('show');
+          if(el === target) return;
+          slideUp(el);
           var t = el.closest('.elementskit-card');
           if(t){
             var a = t.querySelector('.elementskit-btn-link');
@@ -994,11 +1037,17 @@
         });
       }
       if(!isOpen){
-        target.classList.add('show');
+        slideDown(target);
         btn.classList.remove('collapsed');
         btn.setAttribute('aria-expanded','true');
         var card = btn.closest('.elementskit-card');
         if(card) card.classList.add('active');
+      } else {
+        slideUp(target);
+        btn.classList.add('collapsed');
+        btn.setAttribute('aria-expanded','false');
+        var card = btn.closest('.elementskit-card');
+        if(card) card.classList.remove('active');
       }
     });
   });