Replace SVG chevron in collapsibles button with CSS shape

Maintains visual consistency

Author: NicolaSaunders

assets-src/js/main/collapsibles.js

@@ -20,7 +20,7 @@ let collapsibles = function () {
 			headingsArray.forEach(function (heading, index) {
 
 				// Insert a button for opening/closing the collapsible section
-				heading.innerHTML = '<button type="button" class="button--ghost" aria-expanded="false">' + heading.innerHTML + '<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="30px" height="30px"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>';
+				heading.innerHTML = '<button type="button" class="button button--ghost" aria-expanded="false">' + heading.innerHTML + '</svg></button>';
 
 				// Add appropriate aria role to the collapsible section
 				heading.nextElementSibling.setAttribute('aria-hidden', 'true');

assets-src/styles/sass/60-advanced-components/_collapsibles.scss

@@ -27,6 +27,18 @@
 			width: 100%;
 		}
 
+       // Decorative chevron
+        &::after {
+            block-size: rem(14);
+            border-color: black;
+            border-style: solid;
+            border-width: 0 rem(4) rem(4) 0;
+            content: "";
+            inline-size: rem(14);
+            margin-block-start: rem(4);
+            transform: rotate(45deg);
+        }
+
 		&:hover {
 			text-decoration: underline; /* 1 */
 			text-decoration-skip-ink: auto; // Not supported by Safari
@@ -38,20 +50,15 @@
 			background-color: $focus-color;
 			text-decoration: none;
 		}
-
-		&[aria-expanded="false"] .angle-up {
-			display: none;
-		}
-
-		&[aria-expanded="true"] .angle-down {
-			display: none;
-		}
-
-		svg {
-			flex-shrink: 0;
-		}
 	}
 
+    [data-heading="collapsibles"] button[aria-expanded="true"] {
+        &::after {
+            margin-block-start: rem(10);
+            scale: -1;
+        }
+    }
+
 	[data-heading="collapsibles"] + * {
 		&[aria-hidden="true"] {
 			display: none;

public/dist/assets/js/main.js

@@ -417,7 +417,7 @@ let collapsibles = function () {
       // Loop through headings
       headingsArray.forEach(function (heading, index) {
         // Insert a button for opening/closing the collapsible section
-        heading.innerHTML = '<button type="button" class="button--ghost" aria-expanded="false">' + heading.innerHTML + '<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="30px" height="30px"><path class="angle-down" d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"/><path class="angle-up" d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"/></svg></button>';
+        heading.innerHTML = '<button type="button" class="button button--ghost" aria-expanded="false">' + heading.innerHTML + '</svg></button>';
 
         // Add appropriate aria role to the collapsible section
         heading.nextElementSibling.setAttribute('aria-hidden', 'true');