https://watersportscamp.com/js/accordion.js

1// JavaScript Document
2
3// Accordian Script 
4
5
6var acc = document.getElementsByClassName("accordion");
7var panel = document.getElementsByClassName('panel');
8var frame = document.getElementsByClassName('imgframe');
9
10
11for (var i = 0; i < acc.length; i++) {
12    acc[i].onclick = function() {
13        var setClasses = !this.classList.contains('active');
14        setClass(acc, 'active', 'remove');
15		setClass(panel, 'show', 'remove');
16		setClass(frame, 'hide', 'remove');
17
18
19        if (setClasses) {
20            this.classList.toggle("active");
21            this.nextElementSibling.classList.toggle("show");
22			this.firstChild.classList.toggle("hide");
23        }
24
25    }
26}
27
28function setClass(els, className, fnName) {
29    for (var i = 0; i < els.length; i++) {
30        els[i].classList[fnName](className);
31    }
32}
33
34
35
36
37function openAccordionFromHash() {
38  var hash = window.location.hash;
39  if (!hash) return;
40
41  // Prevent default hash jump
42  if ("scrollRestoration" in history) {
43    history.scrollRestoration = "manual";
44  }
45  window.scrollTo(0, 0);
46
47  var panel = document.querySelector(hash);
48  if (!panel) return;
49
50  var accordionBtn = panel.previousElementSibling;
51  if (!accordionBtn || !accordionBtn.classList.contains("accordion")) return;
52
53  // Open the accordion panel
54  accordionBtn.click();
55
56  var hasScrolled = false;
57
58  function scrollToPanel() {
59    if (hasScrolled) return;
60    hasScrolled = true;
61
62    var headerOffset = 100; // adjust if needed
63    var elementPosition = panel.getBoundingClientRect().top;
64    var offsetPosition =
65      elementPosition + window.pageYOffset - headerOffset;
66
67    window.scrollTo({
68      top: offsetPosition,
69      behavior: "smooth"
70    });
71  }
72
73  // Observe panel size changes during expansion
74  var observer = new ResizeObserver(() => {
75    scrollToPanel();
76  });
77
78  observer.observe(panel);
79
80  // Safety stop (matches typical accordion animation duration)
81  setTimeout(() => {
82    observer.disconnect();
83    scrollToPanel();
84  }, 400);
85}
86
87// Run AFTER full page load (images, fonts, layout)
88window.addEventListener("load", () => {
89  openAccordionFromHash();
90});
91
92
93// Handle same-page hash links (accordion-only)
94document.addEventListener("click", function (e) {
95  var link = e.target.closest('a[href^="#"]');
96  if (!link) return;
97
98  var hash = link.getAttribute("href");
99  if (!hash || hash === "#") return;
100
101  var target = document.querySelector(hash);
102  if (!target) return;
103
104  // Is this target part of an accordion?
105  var accordionBtn = target.previousElementSibling;
106  var isAccordion =
107    accordionBtn && accordionBtn.classList.contains("accordion");
108
109  // If NOT an accordion target, let the browser scroll normally
110  if (!isAccordion) return;
111
112  // Otherwise, handle it manually
113  e.preventDefault();
114
115  history.pushState(null, "", hash);
116  openAccordionFromHash();
117});