https://cherry-todd.com/modules/contrib/bootstrap_paragraphs/js/bootstrap-paragraphs-accordion.js?t8et8u

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 page loads and there are some accordions defaulted to open this
25     * function will grab those accordions and change the alt text for them.
26     */
27    $(".panel-collapse.in").each(function () {
28      changeAccordionAlt($(this).siblings(".panel-heading").find("a"));
29    });
30
31    /*
32     * When the "Expand/Collapse All" button is click this function will be
33     * called. If the button has the class "active" then open all the accordions
34     *  else close all the accordions.
35     */
36    $(buttonSelector).click(function () {
37      if (!$(this).hasClass("active")) {
38        openAllPanels(this);
39      }
40      else {
41        closeAllPanels(this);
42      }
43    });
44
45    /*
46     * When an accordion is opened this function will be called.
47     */
48    $(".paragraph--type--bp-accordion").on('shown.bs.collapse', function () {
49      // Get the number of open accordions in the container.
50      var numPanelOpen = $(this).find(".panel-collapse.in").length;
51
52      // Get the total number of accordions in the container.
53      var totalNumberPanels = $(this).find(".panel-collapse").length;
54
55      // Call the function to change the alt text of the accordion that was
56      // clicked.
57      changeAccordionAlt($(".panel-title a", this));
58
59      // If the number of open accordions equals the total number of accordions
60      // then the "Expand/Collapse All" button needs to be changed.
61      if (numPanelOpen === totalNumberPanels) {
62        changePanelButtonToCollapse($(this).siblings(buttonSelector));
63      }
64    });
65
66    /*
67     * When an accordion is closed this function will be called.
68     */
69    $(".paragraph--type--bp-accordion").on('hidden.bs.collapse', function () {
70      // Get the number of open accordions in a container.
71      var numPanelOpen = $(this).find(".panel-collapse.in").length;
72
73      // Call the function to change the alt text of the accordion that was
74      // clicked.
75      changeAccordionAlt($(".panel-title a", this));
76
77      // If the number of open accordions equals 0 then the
78      // "Expand/Collapse All" button needs to be changed.
79      if (numPanelOpen === 0) {
80        changePanelButtonToExpand($(this).siblings(buttonSelector));
81      }
82    });
83
84    /*
85     * Take in a container id and open all the panels within that container.
86     */
87    function openAllPanels(id) {
88      $(id).siblings('.paragraph').find(".panel-collapse").collapse('show');
89    }
90
91    /*
92     * Take in a container id and close all the panels within that container.
93     */
94    function closeAllPanels(id) {
95      $(id).siblings('.paragraph').find(".panel-collapse").collapse('hide');
96    }
97
98    /*
99     * Take in an id parameter.  First check that the variable sent has the
100     * class 'active' this would mean it is open.  If the variable does then go
101     * ahead and switch the title text and display text to say 'Collapse All'.
102     */
103    function changePanelButtonToCollapse(id) {
104      if ($(id).hasClass("active")) {
105        return;
106      }
107      $(id).attr("title", Drupal.t("Click to collapse all accordions in this section."));
108      $(id).text(Drupal.t("Collapse All"));
109      $(id).toggleClass("active");
110    }
111
112    /*
113     * Take in an id parameter.  First check that the variable sent doesn't have
114     *  class 'active' this would mean it is open.  If the variable does not
115     * then go ahead and switch the title text and display text to say
116     * 'Expand All'.
117     */
118    function changePanelButtonToExpand(id) {
119      if (!$(id).hasClass("active")) {
120        return;
121      }
122      $(id).attr("title", Drupal.t("Click to expand all accordions in this section."));
123      $(id).text(Drupal.t("Expand All"));
124      $(id).toggleClass("active");
125    }
126
127    /*
128     * Take in an id parameter and use that variable to in a jQuery call to see
129     * if the accordion is open or closed then change the alt text based on the
130     * results.
131     */
132    function changeAccordionAlt(id) {
133      if ($(id).attr("aria-expanded") === 'true') {
134        $(id).attr("alt", Drupal.t("Currently open. Click to collapse this section."));
135      }
136      else {
137        $(id).attr("alt", Drupal.t("Currently closed. Click to expand this section."));
138      }
139    }
140
141  });
142})(jQuery);