diff --git a/src/octoprint/static/js/app/viewmodels/control.js b/src/octoprint/static/js/app/viewmodels/control.js
index a4a0bf9f..6ad7f4cf 100644
--- a/src/octoprint/static/js/app/viewmodels/control.js
+++ b/src/octoprint/static/js/app/viewmodels/control.js
@@ -22,6 +22,7 @@ $(function() {
 
         self.extrusionAmount = ko.observable(undefined);
         self.controls = ko.observableArray([]);
+        self.staticID = 0;
 
         self.tools = ko.observableArray([]);
 
@@ -131,6 +132,8 @@ $(function() {
         };
 
         self._processControl = function (control) {
+            control.id = ko.observable("settingsCustomControl_id" + self.staticID++);
+
             if (control.hasOwnProperty("processed") && control.processed) {
                 return control;
             }
diff --git a/src/octoprint/templates/tabs/control.jinja2 b/src/octoprint/templates/tabs/control.jinja2
index 63f40694..04a523f8 100644
--- a/src/octoprint/templates/tabs/control.jinja2
+++ b/src/octoprint/templates/tabs/control.jinja2
@@ -108,19 +108,19 @@
 <script type="text/html" id="customControls_containerTemplate">
     <div class="custom_section" data-bind="css: { 'custom_section_vertical_section': !($parent && $parent.layout == 'horizontal'), 'custom_section_horizontal_section': $parent && $parent.layout == 'horizontal' }">
         <!-- ko if: name -->
-        <h1 data-bind="text: name"></h1>
+        <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: { 'data-target': '#' + id() }"><h1 data-bind="text: name"></h1></a>
         <!-- /ko -->
 
         <!-- ko if: layout == 'vertical' -->
-        <div class="custom_section custom_section_vertical" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+        <div class="custom_section custom_section_vertical collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
         <!-- /ko -->
 
         <!-- ko if: layout == 'horizontal' -->
-        <div class="custom_section custom_section_horizontal" data-bind="template: { name: $root.displayMode, foreach: children }"></div>
+        <div class="custom_section custom_section_horizontal collapse in" data-bind="template: { name: $root.displayMode, foreach: children }, attr: { 'id': id }"></div>
         <!-- /ko -->
 
         <!-- ko if: layout == 'horizontal_grid' -->
-        <div class="row-fluid custom_section custom_section_horizontal_grid">
+        <div class="row-fluid custom_section custom_section_horizontal_grid collapse in" data-bind="attr: { 'id': id }">
             <!-- ko foreach: children -->
             <div data-bind="template: { name: $root.displayMode }, css: $root.rowCss($data)"></div>
             <!-- /ko -->
@@ -137,7 +137,7 @@
 </script>
 <script type="text/html" id="customControls_controlTemplate_input">
     <!-- ko foreach: input -->
-        <label data-bind="text: name"></label>
+        <label style="cursor: default" data-bind="text: name"></label>
         <!-- ko if: slider -->
             <input type="number" style="width: 100px" data-bind="slider: {value: value, min: slider.min, max: slider.max, step: slider.step}">
         <!-- /ko -->
@@ -147,7 +147,7 @@
     <!-- /ko -->
 </script>
 <script type="text/html" id="customControls_controlTemplate_output">
-    <label data-bind="text: output"></label>
+    <label style="cursor: default" data-bind="text: output"></label>
 </script>
 <script type="text/html" id="customControls_controlTemplate_command">
     <button class="btn" data-bind="text: name, enable: $root.isCustomEnabled($data), click: function() { $root.clickCustom($data) }"></button>