https://www.elle.cz/js/modules/subscriptionAccordion.js

1import {createExclusiveDisclosureGroup} from '../core/disclosureGroup.js';
2
3export function initSubscriptionAccordion() {
4  const accordion = document.querySelector('[data-subscription-accordion]');
5  const subscriptionGroup = createExclusiveDisclosureGroup({
6    container: accordion,
7    itemSelector: '[data-subscription-section]',
8    headerSelector: '[data-subscription-section-header]',
9    expandedClass: 'subscription-section--expanded'
10  });
11
12  const openSectionFromHash = (hashValue = window.location.hash) => {
13    if (!accordion || !subscriptionGroup) {
14      return;
15    }
16
17    const hash = decodeURIComponent(hashValue.replace('#', '')).trim();
18    if (!hash) {
19      return;
20    }
21
22    const section = accordion.querySelector(`[data-subscription-section-key="${CSS.escape(hash)}"]`);
23    if (!section) {
24      return;
25    }
26
27    subscriptionGroup.openOnly(section);
28    window.requestAnimationFrame(() => {
29      section.scrollIntoView({block: 'start'});
30    });
31  };
32
33  const openSectionFromCurrentPageLink = event => {
34    if (!accordion || !subscriptionGroup) {
35      return;
36    }
37
38    if (!(event.target instanceof Element)) {
39      return;
40    }
41
42    const link = event.target.closest('a[href]');
43    if (!link) {
44      return;
45    }
46
47    const targetUrl = new URL(link.href, window.location.href);
48    if (
49      targetUrl.origin !== window.location.origin ||
50      targetUrl.pathname !== window.location.pathname ||
51      targetUrl.search !== window.location.search ||
52      !targetUrl.hash
53    ) {
54      return;
55    }
56
57    const hash = decodeURIComponent(targetUrl.hash.replace('#', '')).trim();
58    const section = accordion.querySelector(`[data-subscription-section-key="${CSS.escape(hash)}"]`);
59    if (!section) {
60      return;
61    }
62
63    event.preventDefault();
64    if (window.location.hash !== targetUrl.hash) {
65      window.history.pushState(null, '', targetUrl.hash);
66    }
67
68    openSectionFromHash(targetUrl.hash);
69  };
70
71  openSectionFromHash();
72  window.addEventListener('hashchange', () => openSectionFromHash());
73  document.addEventListener('click', openSectionFromCurrentPageLink);
74
75  const faqSection = document.querySelector('[data-faq-section]');
76  createExclusiveDisclosureGroup({
77    container: faqSection,
78    itemSelector: '[data-faq-item]',
79    headerSelector: '[data-faq-item-header]',
80    expandedClass: 'faq-section__item--expanded'
81  });
82}