From 2c7f6e0d46dbde715208ece59302065b854c13b7 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 16:09:53 +0100
Subject: [PATCH 01/10] Remove accordion icon added by JS and add to twig
 instead

---
 modules/localgov_subsites_paragraphs/js/localgov-accordion.js   | 2 --
 .../localgov_subsites_paragraphs.module                         | 2 ++
 .../templates/paragraph--localgov-accordion-pane.html.twig      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index 1b07288..f5e333e 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -127,8 +127,6 @@
 
           // Add show/hide button to each accordion title.
           button.appendChild(text);
-          // Add an initially hidden icon which can be used if required to make accordions fit GDS standard
-          button.innerHTML += "<span class='accordion-icon' aria-hidden='true'></span>";
           button.setAttribute('aria-expanded', 'false');
           button.setAttribute('aria-controls', id);
 
diff --git a/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module b/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module
index b1660d6..741c03e 100644
--- a/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module
+++ b/modules/localgov_subsites_paragraphs/localgov_subsites_paragraphs.module
@@ -122,6 +122,8 @@ function localgov_subsites_paragraphs_preprocess_paragraph(&$variables) {
     $heading_level = $paragraph->get('localgov_heading_level')->value;
     if (is_string($heading_level)) {
       $variables['heading'] = _localgov_subsites_paragraphs_create_heading($heading_text, $heading_level);
+      $variables['heading_text'] = $heading_text;
+      $variables['heading_level'] = $heading_level;
     }
   }
 
diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
index fc70928..de0ab38 100644
--- a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
+++ b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
@@ -52,7 +52,7 @@
   <div{{ attributes.addClass(classes) }}>
     {% block content %}
       <div class="accordion-pane__title">
-        {{ heading }}
+        <{{ heading_level }}>{{ heading_text }}<span class='accordion-icon' aria-hidden='true'></{{ heading_level }}>
       </div>
       <div class="accordion-pane__content">
         {{ content.localgov_body_text }}

From 27ff3e6b2b49e7183e8ea493342dafac1e1bdc33 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 19:45:18 +0100
Subject: [PATCH 02/10] Moved button from JS to Twig

---
 .../js/localgov-accordion.js                           | 10 +++++-----
 .../paragraph--localgov-accordion-pane.html.twig       |  7 ++++++-
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index f5e333e..d8723cf 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -117,17 +117,17 @@
           const pane = accordionPanes[i];
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
-          const titleText = title[0].textContent;
-          const button = document.createElement('button');
-          const text = document.createTextNode(titleText);
+          //const titleText = title[0].textContent;
+          const button = title.querySelectorAll('button');
+          //const text = document.createTextNode(titleText);
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.
           content[0].setAttribute('id', id);
 
           // Add show/hide button to each accordion title.
-          button.appendChild(text);
-          button.setAttribute('aria-expanded', 'false');
+          //button.appendChild(text);
+         // button.setAttribute('aria-expanded', 'false');
           button.setAttribute('aria-controls', id);
 
           // Add click event listener to the show/hide button.
diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
index de0ab38..e792ec9 100644
--- a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
+++ b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
@@ -52,7 +52,12 @@
   <div{{ attributes.addClass(classes) }}>
     {% block content %}
       <div class="accordion-pane__title">
-        <{{ heading_level }}>{{ heading_text }}<span class='accordion-icon' aria-hidden='true'></{{ heading_level }}>
+        <{{ heading_level }}>
+          <button aria-expanded="false">
+            {{ heading_text }}
+            <span class='accordion-icon' aria-hidden='true'></span>
+          </button>
+        </{{ heading_level }}>
       </div>
       <div class="accordion-pane__content">
         {{ content.localgov_body_text }}

From 68495da6b5c1afad7992addf493d64039f413c24 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 19:51:30 +0100
Subject: [PATCH 03/10] Removed un-needed commented code

---
 modules/localgov_subsites_paragraphs/js/localgov-accordion.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index d8723cf..e38b647 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -125,9 +125,7 @@
           // Add id attribute to all pane content elements.
           content[0].setAttribute('id', id);
 
-          // Add show/hide button to each accordion title.
-          //button.appendChild(text);
-         // button.setAttribute('aria-expanded', 'false');
+          // Add aria-controls id to button
           button.setAttribute('aria-controls', id);
 
           // Add click event listener to the show/hide button.

From ac68b5a765ee9c6ed37109efcdc489d0e4022610 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 19:53:29 +0100
Subject: [PATCH 04/10] Removed more commented code

---
 modules/localgov_subsites_paragraphs/js/localgov-accordion.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index e38b647..0c5efa2 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -117,9 +117,7 @@
           const pane = accordionPanes[i];
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
-          //const titleText = title[0].textContent;
           const button = title.querySelectorAll('button');
-          //const text = document.createTextNode(titleText);
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.

From 65dbc63f18defbc3d341870fc5c16c1eb938e2c7 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 20:44:29 +0100
Subject: [PATCH 05/10] Updated button to hidden in twig and un-hidden by JS
 and updated destroy()

---
 .../js/localgov-accordion.js                       | 14 ++++++++------
 .../paragraph--localgov-accordion-pane.html.twig   |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index 0c5efa2..f55c0a4 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -124,6 +124,7 @@
           content[0].setAttribute('id', id);
 
           // Add aria-controls id to button
+          button.hidden = false;
           button.setAttribute('aria-controls', id);
 
           // Add click event listener to the show/hide button.
@@ -182,13 +183,14 @@
 
       const destroy = () => {
         for (let i = 0; i < numberOfPanes; i++) {
-          // Remove buttons from accordion pane titles.
+          // Remove id attributes from buttons in accordion pane titles.
           const button = accordion
-            .querySelectorAll('.accordion-pane__title')
-            [i].querySelectorAll('button');
-          if (button.length > 0) {
-            button[0].outerHTML = button[0].innerHTML;
-          }
+            .querySelectorAll('.accordion-pane__title')[i]
+            .querySelectorAll('button')
+            .removeAttribute('id');
+          
+          // Hide buttons in accordion pane titles.
+          button.hidden = true;
 
           // Remove id attributes from pane content elements.
           accordionPanes[i]
diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
index e792ec9..eae3371 100644
--- a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
+++ b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
@@ -53,7 +53,7 @@
     {% block content %}
       <div class="accordion-pane__title">
         <{{ heading_level }}>
-          <button aria-expanded="false">
+          <button aria-expanded="false" hidden>
             {{ heading_text }}
             <span class='accordion-icon' aria-hidden='true'></span>
           </button>

From dd04fd4c85311677b6887713713c185c9bc03f7c Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 21:39:15 +0100
Subject: [PATCH 06/10] Corrected button selector code

---
 modules/localgov_subsites_paragraphs/js/localgov-accordion.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index f55c0a4..31d3617 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -117,7 +117,7 @@
           const pane = accordionPanes[i];
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
-          const button = title.querySelectorAll('button');
+          const button = title[0].querySelector('.accordion-pane-toggle');
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.

From 25090098ed8d3436645d0d487c96cb0b4b53f1f7 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 21:48:53 +0100
Subject: [PATCH 07/10] Removed unrequired class from button

---
 modules/localgov_subsites_paragraphs/js/localgov-accordion.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index 31d3617..75cc149 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -117,7 +117,7 @@
           const pane = accordionPanes[i];
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
-          const button = title[0].querySelector('.accordion-pane-toggle');
+          const button = title[0].querySelector('button');
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.

From 916fd2dbffd3223f36b9c9b06ec32827e0b84734 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 22:08:00 +0100
Subject: [PATCH 08/10] Hide the button in CSS when it has attribute "hidden"

---
 .../localgov_subsites_paragraphs/css/localgov-accordion.css   | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/modules/localgov_subsites_paragraphs/css/localgov-accordion.css b/modules/localgov_subsites_paragraphs/css/localgov-accordion.css
index c20658f..b56b0b6 100644
--- a/modules/localgov_subsites_paragraphs/css/localgov-accordion.css
+++ b/modules/localgov_subsites_paragraphs/css/localgov-accordion.css
@@ -8,6 +8,10 @@
   text-align: left;
 }
 
+.accordion-pane__title button[hidden] {
+	display: none;
+}
+
 .accordion--initialised .accordion-pane__content {
   display: none;
 }

From e62b48a25790bc701082a36357131d5333948371 Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Tue, 24 Sep 2024 22:30:46 +0100
Subject: [PATCH 09/10] Added default heading text, hide in JS

---
 .../js/localgov-accordion.js                     | 16 +++++++++++++---
 .../paragraph--localgov-accordion-pane.html.twig |  1 +
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index 75cc149..5d448eb 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -118,14 +118,18 @@
           const content = pane.querySelectorAll('.accordion-pane__content');
           const title = pane.querySelectorAll('.accordion-pane__title');
           const button = title[0].querySelector('button');
+          const heading = title[0].querySelector('.accordion-pane__heading');
           const id = `accordion-content-${index}-${i}`;
 
           // Add id attribute to all pane content elements.
           content[0].setAttribute('id', id);
 
-          // Add aria-controls id to button
-          button.hidden = false;
+          // Add aria-controls id to button and un-hide
           button.setAttribute('aria-controls', id);
+          button.hidden = false;
+
+          // Hide default Heading text
+          heading.hidden = true;
 
           // Add click event listener to the show/hide button.
           button.addEventListener('click', e => {
@@ -186,12 +190,18 @@
           // Remove id attributes from buttons in accordion pane titles.
           const button = accordion
             .querySelectorAll('.accordion-pane__title')[i]
-            .querySelectorAll('button')
+            .querySelector('button')
             .removeAttribute('id');
           
           // Hide buttons in accordion pane titles.
           button.hidden = true;
 
+          // Un-hide default heading text
+          accordion
+            .querySelectorAll('.accordion-pane__title')[i]
+            .querySelector('.accordion-pane__heading')
+            .hidden = false
+
           // Remove id attributes from pane content elements.
           accordionPanes[i]
             .querySelectorAll('.accordion-pane__content')[0]
diff --git a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
index eae3371..d0a622b 100644
--- a/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
+++ b/modules/localgov_subsites_paragraphs/templates/paragraph--localgov-accordion-pane.html.twig
@@ -53,6 +53,7 @@
     {% block content %}
       <div class="accordion-pane__title">
         <{{ heading_level }}>
+          <span class="accordion-pane__heading">{{ heading_text }}</span>
           <button aria-expanded="false" hidden>
             {{ heading_text }}
             <span class='accordion-icon' aria-hidden='true'></span>

From 52b8cc9779d30195189295c4d17012226a1379ff Mon Sep 17 00:00:00 2001
From: Alistair <Alistair.Wearring@west-lindsey.gov.uk>
Date: Wed, 25 Sep 2024 10:25:39 +0100
Subject: [PATCH 10/10] If heading or buttons don't exist

---
 .../js/localgov-accordion.js                  | 116 ++++++++++--------
 1 file changed, 62 insertions(+), 54 deletions(-)

diff --git a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
index 5d448eb..cfba2a9 100644
--- a/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
+++ b/modules/localgov_subsites_paragraphs/js/localgov-accordion.js
@@ -124,64 +124,67 @@
           // Add id attribute to all pane content elements.
           content[0].setAttribute('id', id);
 
-          // Add aria-controls id to button and un-hide
-          button.setAttribute('aria-controls', id);
-          button.hidden = false;
-
           // Hide default Heading text
-          heading.hidden = true;
-
-          // Add click event listener to the show/hide button.
-          button.addEventListener('click', e => {
-            const targetPaneId = e.target.getAttribute('aria-controls');
-            const targetPane = accordion.querySelectorAll(`#${targetPaneId}`);
-            const openPane = accordion.querySelectorAll(`.${openClass}`);
-
-            // Check the current state of the button and the content it controls.
-            if (e.target.getAttribute('aria-expanded') === 'false') {
-              // Close currently open pane.
-              if (openPane.length && !allowMultiple) {
-                const openPaneId = openPane[0].getAttribute('id');
-                const openPaneButton = accordion.querySelectorAll(
-                  `[aria-controls="${openPaneId}"]`,
-                );
-
-                collapsePane(openPaneButton[0], openPane[0]);
+          if (heading) {  
+            heading.hidden = true;  
+          };
+          
+          if (button) {
+            // Add aria-controls id to button and un-hide
+            button.setAttribute('aria-controls', id);
+            button.hidden = false;
+          
+            // Add click event listener to the show/hide button.
+            button.addEventListener('click', e => {
+              const targetPaneId = e.target.getAttribute('aria-controls');
+              const targetPane = accordion.querySelectorAll(`#${targetPaneId}`);
+              const openPane = accordion.querySelectorAll(`.${openClass}`);
+
+              // Check the current state of the button and the content it controls.
+              if (e.target.getAttribute('aria-expanded') === 'false') {
+                // Close currently open pane.
+                if (openPane.length && !allowMultiple) {
+                  const openPaneId = openPane[0].getAttribute('id');
+                  const openPaneButton = accordion.querySelectorAll(
+                    `[aria-controls="${openPaneId}"]`,
+                  );
+
+                  collapsePane(openPaneButton[0], openPane[0]);
+                }
+
+                // Show new pane.
+                expandPane(e.target, targetPane[0]);
+              } else {
+                // If target pane is currently open, close it.
+                collapsePane(e.target, targetPane[0]);
               }
 
-              // Show new pane.
-              expandPane(e.target, targetPane[0]);
-            } else {
-              // If target pane is currently open, close it.
-              collapsePane(e.target, targetPane[0]);
-            }
-
-            if (showHideButton) {
-              const accordionState = getAccordionState();
-              const toggleState = showHideButton.getAttribute('aria-expanded') === 'true';
+              if (showHideButton) {
+                const accordionState = getAccordionState();
+                const toggleState = showHideButton.getAttribute('aria-expanded') === 'true';
 
-              if (
-                (accordionState === 1 && !toggleState) ||
-                (!accordionState && toggleState)
-              ) {
-                toggleAll();
+                if (
+                  (accordionState === 1 && !toggleState) ||
+                  (!accordionState && toggleState)
+                ) {
+                  toggleAll();
+                }
               }
+            });
+          };
+
+          if (button) {
+            if (displayShowHide) {
+              showHideButton = accordion.querySelector('.accordion-toggle-all');
+              showHideButton.hidden = false;
+              showHideButton.addEventListener('click', toggleAll);
+              showHideButtonLabel = showHideButton.querySelector('.accordion-text');
             }
-          });
 
-          if (displayShowHide) {
-            showHideButton = accordion.querySelector('.accordion-toggle-all');
-            showHideButton.hidden = false;
-            showHideButton.addEventListener('click', toggleAll);
-            showHideButtonLabel = showHideButton.querySelector('.accordion-text');
-          }
-
-          // Add init class.
-          accordion.classList.add(initClass);
+            // Add init class.
+            accordion.classList.add(initClass);
+          };
 
-          // Add show/hide button to each accordion pane title element.
-          title[0].children[0].innerHTML = '';
-          title[0].children[0].appendChild(button);
         }
       };
 
@@ -194,13 +197,18 @@
             .removeAttribute('id');
           
           // Hide buttons in accordion pane titles.
-          button.hidden = true;
+          if (button) {
+            button.hidden = true;
+          }
 
           // Un-hide default heading text
-          accordion
+          const heading =  accordion
             .querySelectorAll('.accordion-pane__title')[i]
-            .querySelector('.accordion-pane__heading')
-            .hidden = false
+            .querySelector('.accordion-pane__heading');
+
+          if (heading) {
+            heading.hidden = false;
+          }
 
           // Remove id attributes from pane content elements.
           accordionPanes[i]