Extract Materialize Collapsible controller

assets/controllers/materialize/collapsible_controller.js

@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus';
+import M from '@materializecss/materialize';
+
+export default class extends Controller {
+  static values = {
+    accordion: { type: Boolean, default: true },
+  };
+
+  connect() {
+    this.instance = M.Collapsible.init(this.element, { accordion: this.accordionValue });
+  }
+
+  disconnect() {
+    this.instance.destroy();
+  }
+}

assets/index.js

@@ -273,10 +273,6 @@ const articleScroll = () => {
 
 $(document).ready(() => {
   $('select').formSelect();
-  $('.collapsible[data-collapsible="accordion"]').collapsible();
-  $('.collapsible[data-collapsible="expandable"]').collapsible({
-    accordion: false,
-  });
 
   $('.dropdown-trigger').dropdown({ hover: false });
   $('.dropdown-trigger[data-covertrigger="false"][data-constrainwidth="false"]').dropdown({

templates/Developer/index.html.twig

@@ -25,7 +25,7 @@
 
                 <h4>{{ 'developer.existing_clients.title'|trans }}</h4>
                 {% if clients %}
-                    <ul class="collapsible" data-collapsible="expandable">
+                    <ul class="collapsible" data-controller="materialize--collapsible" data-materialize--collapsible-accordion-value="false">
                         {% for client in clients %}
                             <li>
                                 <div class="collapsible-header">{{ client.name }} - #{{ client.id }}</div>

templates/Entry/entry.html.twig

@@ -42,7 +42,7 @@
             </ul>
         </div>
     </nav>
-    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-collapsible="accordion" data-controller="materialize--sidenav">
+    <ul id="slide-out" class="left-bar collapsible sidenav sidenav-fixed reader-mode" data-controller="materialize--sidenav materialize--collapsible">
         <li class="bold border-bottom hide-on-med-and-down">
             <a class="waves-effect collapsible-header" href="{{ path('homepage') }}">
                 <i class="material-icons small">arrow_back</i>