https://www.crchurch.cc/Themes/CrossroadsV1/Assets/Scripts/Components/PillarAccordion.js

1// document.addEventListener('DOMContentLoaded', function () {
2//     // Support multiple accordion groups on the same page
3//     document.querySelectorAll('.js-pillar-accordion').forEach(accordion => {
4
5//         // 1. Ensure the first pillar is active (fallback if none have .active)
6//         const firstPillar = accordion.querySelector('.js-pillar');
7//         if (firstPillar && !accordion.querySelector('.js-pillar.active')) {
8//             firstPillar.classList.add('active');
9//         }
10
11//         // 2. Click handler
12//         accordion.addEventListener('click', function (e) {
13//             const clickedPillar = e.target.closest('.js-pillar');
14//             if (!clickedPillar || !accordion.contains(clickedPillar)) return;
15
16//             // If the clicked one is already active → do nothing (no close)
17//             if (clickedPillar.classList.contains('active')) return;
18
19//             // Remove active from all pillars in this group
20//             accordion.querySelectorAll('.js-pillar').forEach(p => {
21//                 p.classList.remove('active');
22//             });
23
24//             // Activate the clicked one
25//             clickedPillar.classList.add('active');
26//         });
27//     });
28// });
29
30
31
32
33
34document.addEventListener('DOMContentLoaded', function () {
35
36    document.querySelectorAll('.js-pillar-accordion').forEach(accordion => {
37
38        const collapsedWidth = 80;
39        const breakpoint = 992;
40
41        const firstPillar = accordion.querySelector('.js-pillar');
42        if (firstPillar && !accordion.querySelector('.js-pillar.active')) {
43            firstPillar.classList.add('active');
44        }
45
46        // INITIALIZE FLEX VALUES FOR ALL PANELS
47        accordion.querySelectorAll('.js-pillar').forEach(pillar => {
48            const isActive = pillar.classList.contains('active');
49
50            gsap.set(pillar, {
51                flexGrow: isActive ? 1 : 0,
52                flexBasis: isActive ? 0 : collapsedWidth
53            });
54        });
55
56        accordion.addEventListener('click', function (e) {
57            const clickedPillar = e.target.closest('.js-pillar');
58            if (!clickedPillar || clickedPillar.classList.contains('active')) return;
59
60            const oldActive = accordion.querySelector('.js-pillar.active');
61
62            accordion.querySelectorAll('.js-pillar').forEach(p => p.classList.remove('active'));
63            clickedPillar.classList.add('active');
64
65            if (window.innerWidth < breakpoint) return;
66
67            gsap.killTweensOf([oldActive, clickedPillar]);
68
69            const tl = gsap.timeline({
70                defaults: { duration: 0.5, ease: "power2.inOut" }
71            });
72
73            // Shrink old active
74            tl.to(oldActive, {
75                flexGrow: 0,
76                flexBasis: collapsedWidth
77            }, 0)
78
79            // Expand new active
80            .to(clickedPillar, {
81                flexGrow: 1,
82                flexBasis: 0
83            }, 0);
84        });
85
86    });
87});