https://vernonelectric.org/modules/contrib/bootstrap_paragraphs/js/bootstrap-paragraphs-accordion.js?tf8im9

1/**
2 * @file
3 * The JavaScript file for Bootstrap Paragraphs Accordion.
4 */
5
6document.addEventListener('DOMContentLoaded', function () {
7  // Get all accordion wrappers on the page.
8  const accordionWrappers = document.querySelectorAll('.accordion-wrapper');
9
10  accordionWrappers.forEach(function (currentWrapper) {
11    expandCollapseAllAccordion(currentWrapper);
12
13    // There is always one accordion opened on load so set every button to "Collapse All".
14    allButtonsClosed(currentWrapper);
15  });
16
17  // This function expands/collapse all accordion panels within the current accordion wrapper.
18  function expandCollapseAllAccordion(currentAccordion) {
19
20    // Accordion variables to target for expand/collapse all.
21    const accordionWrapper = currentAccordion;
22    const buttonSelector = accordionWrapper.querySelector(
23      '.bp-accordion-button',
24    );
25    const accordionButtons =
26      accordionWrapper.querySelectorAll('.accordion-button');
27    const accordionPanels =
28      accordionWrapper.querySelectorAll('.panel-collapse');
29
30    if (buttonSelector) {
31      buttonSelector.addEventListener('click', function () {
32        if (buttonSelector.textContent.trim() === 'Expand All') {
33          buttonSelector.textContent = 'Collapse All';
34          buttonSelector.title =
35            'Click to collapse all accordions in this section.';
36
37          // Toggle the proper classes and values on the accordion button and panel.
38          accordionButtons.forEach(function (accordionButton) {
39            accordionButton.classList.remove('collapsed');
40            accordionButton.setAttribute('aria-expanded', 'true');
41          });
42          accordionPanels.forEach(function (accordionPanel) {
43            accordionPanel.classList.add('show');
44          });
45        } else {
46          buttonSelector.textContent = 'Expand All';
47          buttonSelector.title =
48            'Click to expand all accordions in this section.';
49
50          // Toggle the proper classes and values on the accordion button and panel.
51          accordionButtons.forEach(function (accordionButton) {
52            accordionButton.classList.add('collapsed');
53            accordionButton.setAttribute('aria-expanded', 'false');
54          });
55          accordionPanels.forEach(function (accordionPanel) {
56            accordionPanel.classList.remove('show');
57          });
58        }
59      });
60
61      // Check if all buttons are open or closed after each change of a single accordion.
62      accordionButtons.forEach((accordion) => {
63        accordion.addEventListener('click', function () {
64          checkAllOpenOrClosed(accordionButtons, buttonSelector);
65        });
66      });
67    }
68  }
69

70  // This function sets button to "Collapse All" because there is always 1 accordion item open on load.
71  function allButtonsClosed(currentAccordion) {
72
73    // Accordion variables to target for expand/collapse all.
74    const accordionWrapper = currentAccordion;
75    const buttonSelector = accordionWrapper.querySelector(
76      '.bp-accordion-button',
77    );
78
79    if (buttonSelector) {
80      buttonSelector.textContent = 'Collapse All';
81    }
82  }
83
84  // This function checks if all buttons are closed/open and updates Expand/Collapse All button text.
85  function checkAllOpenOrClosed(accordionButtons, buttonSelector) {
86    const allClosed = Array.from(accordionButtons).every((item) =>
87      item.classList.contains('collapsed'),
88    );
89
90    if (allClosed) {
91      buttonSelector.textContent = 'Expand All';
92    } else {
93      buttonSelector.textContent = 'Collapse All';
94    }
95  }
96
97  // Call the expand/collapse all function for all accordions on the page.
98  accordionWrappers.forEach(function (currentWrapper) {
99    expandCollapseAllAccordion(currentWrapper);
100  });
101});