https://www.chelco.com/modules/contrib/bootstrap_paragraphs/js/bootstrap-paragraphs-accordion.js?td6q3n

1/**
2 * @file
3 * The JavaScript file for Bootstrap Paragraphs Accordion.
4 */
5
6(function ($) {
7  $(document).ready(function ($) {
8    var buttonSelector = ".bp-accordion-button";
9
10    /*
11     * Loop through every bootstrap paragraphs accordion container to check if
12     * all the accordions are open then the "Expand/Collapse All" button text
13     * needs to be changed.  This is a very unique case for example if there is
14     * only 1 accordion and that was default one to be open then the
15     * "Expand/Collapse All" needs to be changed.
16     */
17    $(".paragraph--bp-accordion-container").each(function () {
18      if ($(".panel-collapse.in", this).length === $(".panel-collapse", this).length) {
19        changePanelButtonToCollapse($(buttonSelector, this));
20      }
21    });
22
23    /*
24     * When the "Expand/Collapse All" button is click this function will be
25     * called. If the button has the class "active" then open all the accordions
26     *  else close all the accordions.
27     */
28    $(buttonSelector).click(function () {
29      if (!$(this).hasClass("active")) {
30        openAllPanels(this);
31      }
32      else {
33        closeAllPanels(this);
34      }
35    });
36
37    /*
38     * When an accordion is opened this function will be called.
39     */
40    $(".paragraph--type--bp-accordion").on('shown.bs.collapse', function () {
41      // Get the number of open accordions in the container.
42      var numPanelOpen = $(this).find(".panel-collapse.in").length;
43
44      // Remove aria-expanded attribute from div added by Bootstrap,
45      // to avoid accessibility issues.
46      $(this).find(".panel-collapse").each(function() {
47        $(this).removeAttr("aria-expanded");
48      });
49
50      // Get the total number of accordions in the container.
51      var totalNumberPanels = $(this).find(".panel-collapse").length;
52
53      // If the number of open accordions equals the total number of accordions
54      // then the "Expand/Collapse All" button needs to be changed.
55      if (numPanelOpen === totalNumberPanels) {
56        changePanelButtonToCollapse($(this).siblings(buttonSelector));
57      }
58    });
59
60    /*
61     * When an accordion is closed this function will be called.
62     */
63    $(".paragraph--type--bp-accordion").on('hidden.bs.collapse', function () {
64      // Get the number of open accordions in a container.
65      var numPanelOpen = $(this).find(".panel-collapse.in").length;
66
67      // Remove aria-expanded attribute from div added by Bootstrap,
68      // to avoid accessibility issues.
69      $(this).find(".panel-collapse").each(function() {
70        $(this).removeAttr("aria-expanded");
71      });
72
73      // If the number of open accordions equals 0 then the
74      // "Expand/Collapse All" button needs to be changed.
75      if (numPanelOpen === 0) {
76        changePanelButtonToExpand($(this).siblings(buttonSelector));
77      }
78    });
79
80    /*
81     * Take in a container id and open all the panels within that container.
82     */
83    function openAllPanels(id) {
84      $(id).siblings('.paragraph').find(".panel-collapse").collapse('show');
85    }
86
87    /*
88     * Take in a container id and close all the panels within that container.
89     */
90    function closeAllPanels(id) {
91      $(id).siblings('.paragraph').find(".panel-collapse").collapse('hide');
92    }
93
94    /*
95     * Take in an id parameter.  First check that the variable sent has the
96     * class 'active' this would mean it is open.  If the variable does then go
97     * ahead and switch the title text and display text to say 'Collapse All'.
98     */
99    function changePanelButtonToCollapse(id) {
100      if ($(id).hasClass("active")) {
101        return;
102      }
103      $(id).attr("title", Drupal.t("Click to collapse all accordions in this section."));
104      $(id).text(Drupal.t("Collapse All"));
105      $(id).toggleClass("active");
106    }
107
108    /*
109     * Take in an id parameter.  First check that the variable sent doesn't have
110     *  class 'active' this would mean it is open.  If the variable does not
111     * then go ahead and switch the title text and display text to say
112     * 'Expand All'.
113     */
114    function changePanelButtonToExpand(id) {
115      if (!$(id).hasClass("active")) {
116        return;
117      }
118      $(id).attr("title", Drupal.t("Click to expand all accordions in this section."));
119      $(id).text(Drupal.t("Expand All"));
120      $(id).toggleClass("active");
121    }
122
123  });
124})(jQuery);