Add expand/collapse all button shortcode

torontomulibrary · Oct 8, 2019 · 7dbd568 · 7dbd568
1 parent 7475948
commit 7dbd568
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/js/rl-collapsible-section.js b/js/rl-collapsible-section.js
@@ -38,4 +38,34 @@ jQuery(document).ready( function( jQuery ){
       _$(titleButton).attr('aria-expanded', 'true');
     }
   }
+
+  function collapseCollapsible(collapsible) {
+    _$collapsible = _$(collapsible);
+    if ( !_$collapsible.hasClass('rl-collapsed') ) {
+      _$collapsible.addClass('rl-collapsed');
+      var titleButton = _$collapsible.find('.rl-collapsible-section-title button')[0];
+      _$(titleButton).attr('aria-expanded', 'false');
+    }
+  }
+
+  _$('.rl-collapsible-section-toggle-button').on('click', function() {
+    var expanded = _$(this).data('toggle-expanded');
+    if (expanded) {
+      // collapse all sections
+      _$('.rl-collapsible-section').each(function() {
+        collapseCollapsible(this);
+      });
+    } else {
+      // expand all sections
+      _$('.rl-collapsible-section').each(function() {
+        expandCollapsible(this);
+      });
+    }
+
+    // toggle the data attribute on all toggle buttons
+    _$('.rl-collapsible-section-toggle-button').each(function() {
+      var expanded = _$(this).data('toggle-expanded');
+      _$(this).data('toggle-expanded', !expanded);
+    });
+  });
 });
diff --git a/rl-collapsible-section.php b/rl-collapsible-section.php
@@ -49,3 +49,9 @@ function rl_collapsible_section_shortcode($attrs = [], $content = null, $tag = '
   return do_shortcode($output);
 }
 add_shortcode('rl_collapsible_section', 'rl_collapsible_section_shortcode');
+
+function rl_collapsible_section_toggle_button_shortcode() {
+  $output = '<button class="rl-collapsible-section-toggle-button">Expand / Collapse All</button>';
+  return $output;
+}
+add_shortcode('rl_collapsible_section_toggle_button', 'rl_collapsible_section_toggle_button_shortcode');