Only load expander-related JS on pages that include the expander

src/js/bundle.js

@@ -61,24 +61,6 @@ ready(function () {
     };
 
 
-    // Expander boxes
-    var expandable = document.querySelectorAll('.expandable > .expander');
-    expandable.forEach(function (currentValue, index, arr) {
-        currentValue.onclick = function (e) {
-            e.preventDefault();
-
-            var parent = e.currentTarget.parentNode;
-            if (parent.className.match(/(?:^|\s)expanded(?!\S)/)) {
-                parent.className = parent.className.replace(/(?:^|\s)expanded(?!\S)/g , '');
-            } else {
-                parent.className += " expanded";
-            }
-
-            e.currentTarget.blur();
-        }
-    });
-
-
     // Syntax highlight
     hljs.registerLanguage('xml', xml);
     hljs.registerLanguage('php', php);

src/js/expander.js

+// Expander boxes
+var expandable = document.querySelectorAll('.expandable > .expander');
+expandable.forEach(function (currentValue, index, arr) {
+    currentValue.onclick = function (e) {
+        e.preventDefault();
+
+        var parent = e.currentTarget.parentNode;
+        if (parent.className.match(/(?:^|\s)expanded(?!\S)/)) {
+            parent.className = parent.className.replace(/(?:^|\s)expanded(?!\S)/g , '');
+        } else {
+            parent.className += " expanded";
+        }
+
+        e.currentTarget.blur();
+    }
+});

templates/includes/expander.twig

@@ -11,3 +11,6 @@
 
           </div>
         </div>
+{% block postload %}
+    <script src="{{ asset('js/expander.js') }}"></script>
+{% endblock %}

webpack.config.js

@@ -18,6 +18,7 @@ module.exports = environment => {
     return {
         entry: {
             bundle: './src/js/bundle',
+            expander: './src/js/expander',
             logout: './src/js/logout/main',
             stylesheet: './src/js/style'
         },