diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 11c14a2e4..0333b8dc3 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/app/assets/javascripts/collapsibleCheckboxes.js
@@ -5,7 +5,7 @@
 
   function Summary (module) {
     this.module = module;
-    this.$el = module.$formGroup.find('.selection-summary');
+    this.$el = module.$formGroup.find('.selection-summary').first();
     this.fieldLabel = module.fieldLabel;
     this.total = module.total;
     this.addContent();
@@ -25,6 +25,7 @@
     if (this.fieldLabel === 'folder') { this.$text.addClass('selection-summary__text--folders'); }
 
     this.$el.append(this.$text);
+    this.module.$formGroup.find('.govuk-hint').remove();
   };
   Summary.prototype.update = function(selection) {
     let template;
@@ -86,12 +87,13 @@
       .focus();
   };
   CollapsibleCheckboxes.prototype.start = function(component) {
-    this.$formGroup = $(component);
-    this.$fieldset = this.$formGroup.find('fieldset');
+    this.$component = $(component);
+    this.$formGroup = this.$component.find('.govuk-form-group').first();
+    this.$fieldset = this.$formGroup.find('fieldset').first();
     this.$checkboxes = this.$fieldset.find('input[type=checkbox]');
-    this.fieldLabel = this.$formGroup.data('fieldLabel');
+    this.fieldLabel = this.$component.data('fieldLabel');
     this.total = this.$checkboxes.length;
-    this.legendText = this.$fieldset.find('legend').text().trim();
+    this.legendText = this.$fieldset.find('legend').first().text().trim();
     this.expanded = false;
 
     this.addHeadingHideLegend();
@@ -113,7 +115,7 @@
   };
   CollapsibleCheckboxes.prototype.getSelection = function() { return this.$checkboxes.filter(':checked').length; };
   CollapsibleCheckboxes.prototype.addHeadingHideLegend = function() {
-    const headingLevel = this.$formGroup.data('heading-level') || '2';
+    const headingLevel = this.$component.data('heading-level') || '2';
 
     this.$heading = $(`<h${headingLevel} class="heading-small">${this.legendText}</h${headingLevel}>`);
     this.$fieldset.before(this.$heading);
diff --git a/app/main/forms.py b/app/main/forms.py
index c72b4a4fb..7aeeb2603 100644
--- a/app/main/forms.py
+++ b/app/main/forms.py
@@ -547,6 +547,36 @@ class govukCheckboxesField(SelectMultipleField):
             render_template('vendor/govuk-frontend/components/checkboxes/template.njk', params=params))
 
 
+# Extends fields using the govukCheckboxesField interface to wrap their render in HTML needed by the collapsible JS
+class govukCollapsibleCheckboxesMixin:
+    def __init__(self, label='', validators=None, field_label='', param_extensions=None, **kwargs):
+
+        self.field_label = field_label
+
+    def widget(self, field, **kwargs):
+
+        # add a blank hint to act as an ARIA live-region
+        if self.param_extensions is not None:
+            self.param_extensions.update(
+                {"hint": {"html": "<div class=\"selection-summary\" role=\"region\" aria-live=\"polite\"></div>"}})
+        else:
+            self.param_extensions = \
+                {"hint": {"html": "<div class=\"selection-summary\" role=\"region\" aria-live=\"polite\"></div>"}}
+
+        # wrap the checkboxes HTML in the HTML needed by the collapisble JS
+        return Markup(
+            f'<div class="selection-wrapper"'
+            f'     data-module="collapsible-checkboxes"'
+            f'     data-field-label="{self.field_label}">'
+            f'  {super(govukCollapsibleCheckboxesMixin, self).widget(field, **kwargs)}'
+            f'</div>'
+        )
+
+
+class govukCollapsibleCheckboxesField(govukCollapsibleCheckboxesMixin, govukCheckboxesField):
+    pass
+
+
 class PermissionsForm(StripWhitespaceForm):
     def __init__(self, all_template_folders=None, *args, **kwargs):
         super().__init__(*args, **kwargs)