mgibson12

I took Chateau Fiesta’s code and changed the functionality so that the text would change depending if the spoiler was expanded or collapsed.

HTML
<a href="#" id="open-spoilers" class="btnExpandAll">Expand All</a>

JAVASCRIPT
// Create a user-friendly button to expand or collapse all panels with one click.

jQuery(document).ready(function($) {
   $('#open-spoilers').on('click', function(e) {
      e.preventDefault();

      if($('.su-spoiler').hasClass('su-spoiler-closed'))
      {
        $('.su-spoiler').removeClass('su-spoiler-closed').addClass('su-spoiler-open');

      }
      else
      {
          $('.su-spoiler').removeClass('su-spoiler-open').addClass('su-spoiler-closed');
      }
            var label=$('.btnExpandAll').text();
            var newLabel=(label=="Expand All"
            ? "Collapse All" : "Expand All");

             $('.btnExpandAll').text(newLabel);
      e.stopPropagation();
   });
});