How to set all sections to be closed using collapsible instead of one remain open

[SUTHERLANDesign]

At the moment accordions always keep one section open, how to allow for all sections to be be collapsible? is there a way to set the collapsible set to true in the yml file?

[korthjp17]

That is the default behavior of the jQuery UI accordion. You can duplicate the template into your theme/app/mysite folder and swap out the init script to include the collapsible option - https://jqueryui.com/accordion/#collapsible.

<script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
</script>

If you want to do a PR for adding that option as something that can be configured with the yml file, we can take a look at it.

[SUTHERLANDesign]

@korthjp17, copy this template, ElementAccordion.ss into my mysite folder? and swap out this line:
<% require javascript('dynamic/silverstripe-elemental-accordion: client/dist/accordion.init.min.js') %>

to this code?

<script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  } );
</script>

Correct?

[korthjp17]

That should work. The template file will have to follow the same folder structure as you see in the module though.

For the script, if you are leaving the template as-is for setting up the accordion, use .accordion instead of #accordion

[SUTHERLANDesign]

@korthjp17, have tired both ways, still not working to get it collapsible. The template is actually working when i use the same folder structure, but collapsible itself it not working.

Also tried to leave the template as it is, and use .accordion, does not work. I also tried to take out the accordion.init.min.js and swap for the code you've given me with #accordion, still doesn't work.

[korthjp17]

Just pulled it down and have it working. You will likely have to create a JS file for the new init script to go in. Silverstripe is including the <script> tag before the <% require %> js lines.

I created a JS file with this code and included it with the <% require %> and it's working.

;(function ($) {
    $(document).on("ready", function () {
        $( ".accordion" ).accordion({
            collapsible: true
        });
    });
})(jQuery);

[SUTHERLANDesign]

I just did what you suggested, and it is actually working! but every time i visit the page, the first section is still open, but i can close it. Just wanted to have all closed when i visit the page, is that possible to have all closed when visiting the page?

[korthjp17]

It looks like you can set the active option to false - http://api.jqueryui.com/accordion/#option-active

[SUTHERLANDesign]

Got it working now. Thank you so much. 👍

Here's what i added the active option to be false:

;(function ($) {
    $(document).on("ready", function () {
        $( ".accordion" ).accordion({
            collapsible: true,
            active: false
        });
    });
})(jQuery);