Open all spoilers at once?

This is documented in the plugin (got to Shortcodes > Examples), you need to add open=”yes” to the spoiler, e.g.

[su_accordion]
[su_spoiler title=”Spoiler title” open=”yes”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[su_spoiler title=”Spoiler title”] Spoiler content [/su_spoiler]
[/su_accordion]

Thanks trixee. I was actually after a way of opening or closing them all at the same time, regardless of whether they were set to display as open initially or not – is that possible?

Ah sorry, I misunderstood. I didn’t come across anything like that.

No worries – thanks anyway! ??

HTML:

<a href="javascript:;" id="open-spoilers-link">Open spoilers</a>

JavaScript:

<script type="text/javascript">
jQuery(document).ready(function($) {
   $('#open-spoilers-link').on('click', function(e) {
      e.preventDefault();
      $('.su-spoiler').removeClass('su-spoiler-closed').addClass('su-spoiler-open');
   });
});
</script>

Hi,

I am quite inexperienced.

Where should I place the JavaScript code:

Thanks
Riccardo

For anyone looking for this. I picked Vladimir Anokhin code and added a little bit so that it works as an “Open All/Close all”.

HTML

<a href="#" id="open-spoilers">Open spoilers/Close spoilers</a>

JAVASCRIPT

<script type="text/javascript">
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');
      }
      e.stopPropagation();
   });
});

</script>

@riccardo You can place the javascript code in the header.php file just before the </head> tag.

Thanks,
it worked

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();
   });
});