adam/seahaven-site
1
0
Fork 0
mirror of https://github.com/Sea-Haven-Industries/seahaven-site.git synced 2026-09-30 06:33:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add slide animation to social accountability accordion

Browse source 
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>
This commit is contained in:
Adam Moussa 2026-04-04 18:56:37 -04:00
parent d7a828f32e
commit d2abf206cf
1 changed files with 53 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
social-accountability/index.html
View file

@ -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');
}
});
});