Merge pull request #1149 from alphagov/al/fix-accordion-no-js

Fixes styling of accordion when there is no js

CHANGELOG.md

@@ -32,6 +32,12 @@
 
   ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
 
+- Fixes styling of the accordion component when there is no JavaScript or it has been turned off
+
+  Thanks @dankmitchell for reporting this issue ([#1130](https://github.com/alphagov/govuk-frontend/issues/1130))
+
+  ([PR #1149](https://github.com/alphagov/govuk-frontend/pull/1149))
+
 - Remove hover state for accordion sections on mobile
 
   ([PR #1148](https://github.com/alphagov/govuk-frontend/pull/1148))

src/components/accordion/_accordion.scss

@@ -7,13 +7,11 @@
 
   .govuk-accordion {
     @include govuk-responsive-margin(6, "bottom");
-    // Border at the bottom of the whole accordion
-    border-bottom: 1px solid $govuk-border-colour;
   }
 
   // Borders between accordion sections
   .govuk-accordion__section {
-    border-top: 1px solid $govuk-border-colour;
+    padding-top: govuk-spacing(3);
   }
 
   .govuk-accordion__section-header {
@@ -28,6 +26,7 @@
   // Buttons within the sections don’t need default styling
   .govuk-accordion__section-button {
     @include govuk-font($size: 24, $weight: bold);
+    display: inline-block;
     margin-bottom: 0;
     padding-top: govuk-spacing(3);
   }
@@ -37,21 +36,32 @@
     margin-bottom: 0;
   }
 
+  // Remove the bottom margin from the last item inside the content
+  .govuk-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
   // JavaScript enabled
   .js-enabled {
 
+    .govuk-accordion {
+      // Border at the bottom of the whole accordion
+      border-bottom: 1px solid $govuk-border-colour;
+    }
+
+    // Borders between accordion sections
+    .govuk-accordion__section {
+      padding-top: 0;
+      border-top: 1px solid $govuk-border-colour;
+    }
+
     // Hide the body of collapsed sections
     .govuk-accordion__section-content {
       display: none;
       @include govuk-responsive-padding(3, "top");
       @include govuk-responsive-padding(3, "bottom");
     }
 
-    // Remove the bottom margin from the last item inside the content
-    .govuk-accordion__section-content > :last-child {
-      margin-bottom: 0;
-    }
-
     // Show the body of expanded sections
     .govuk-accordion__section--expanded .govuk-accordion__section-content {
       display: block;