How to implement Accordion for mobile support of Flexsections course plugin in Moodle 4.0?

Question

I need to implement the mobile app support for the Flexsections course format in Moodle 4.0. By default the subsections are shown as just another section in the Moodle app like any Topics format. I need to implement the accordion in Ionic 5 using mustasche template and javascript where subsections are collapsed within main sections in the mobile app.

Since this is Ionic 5 I dont have the ion-accordion component. So I searched the internet on how an accordion is implemented in HTML/CSS/JS as well as Ionic 5 and found this tutorials:

1.Ionic 5 accordion List

But since we can only write plain js in the mobile support files of Moodle plugin, I don't know how to implement Accordion.

Answer 1

There are a couple of pages in the app that use an accordion, for example the message groups. You can see how that's done for inspiration on how to do it in your plugin (take special attention to the aria-* attributes such as aria-expanded to make them accessible).

I say "for inspiration" because as you mentioned, you can't write new components in plugins. But you should be able to use things such as CONTENT_OTHERDATA in your template, and toggle it in the JavaScript. You can learn more about that in the documentation: Using otherdata