Merge pull request #75 from hlxsites/accordion

Accordion

blocks/accordion/accordion.css

@@ -101,6 +101,24 @@ main .accordion.faq-accordion .faq-answer.active {
     display: block;
 }
 
+main .expand_collapse {
+    text-align: right;
+    max-width: 980px;
+    margin: 10px auto 0;
+}
+
+main .expand_collapse .collapse-btn, .expand_collapse.expanded .expand-btn {
+    display: none;
+}
+
+main .expand-btn, .collapse-btn {
+    color: #fff;
+    background-color: #e46b29;
+    padding: 4px 10px;
+    display: inline-block;
+    text-decoration: none;
+}
+
 /* Tablet */
 @media only screen and (min-width: 768px) {
     main .accordion {

blocks/accordion/accordion.js

@@ -1,32 +1,66 @@
 export default function decorate(block) {
+  const divCta = document.querySelector('div .cta');
+  if (divCta) {
+    const expandCollapse = document.createElement('div');
+    expandCollapse.classList.add('expand_collapse');
+    const expandBtn = document.createElement('a');
+    expandBtn.classList.add('expand-btn');
+    expandBtn.setAttribute('href', '#');
+    expandBtn.textContent = 'Expand All';
+    const collapseBtn = document.createElement('a');
+    collapseBtn.classList.add('collapse-btn');
+    collapseBtn.setAttribute('href', '#');
+    collapseBtn.textContent = 'Collapse All';
+    expandCollapse.appendChild(expandBtn);
+    expandCollapse.appendChild(collapseBtn);
+    const parent = block.parentNode;
+    parent.prepend(expandCollapse);
+    // event listeners for expand, collapse buttons
+    expandCollapse.addEventListener('click', (event) => {
+      if (event.target.classList.contains('expand-btn')) {
+        document.querySelector('.expand_collapse').classList.add('expanded');
+        document.querySelector('.collapse-btn').style.display = 'inline-block';
+        const allQuestions = document.querySelectorAll('.faq-question');
+        allQuestions.forEach((ele) => {
+          ele.classList.add('active');
+          ele.nextElementSibling.classList.add('active');
+          ele.nextElementSibling.style.maxHeight = `${ele.nextElementSibling.scrollHeight}px`;
+        });
+      } else if (event.target.classList.contains('collapse-btn')) {
+        document.querySelector('.expand_collapse').classList.remove('expanded');
+        document.querySelector('.collapse-btn').style.display = 'none';
+        const allQuestions = document.querySelectorAll('.faq-question');
+        allQuestions.forEach((ele) => {
+          ele.classList.remove('active');
+          ele.nextElementSibling.classList.remove('active');
+          ele.nextElementSibling.style.removeProperty('max-height');
+        });
+      }
+    });
+  }
   const faqRows = [...block.children];
   block.classList.add('faq-accordion');
-
   faqRows.forEach((row) => {
     const faqQuestion = [...row.children][0];
-    const faqAnswer = [...row.children][1];
     faqQuestion.classList.add('faq-question');
-    faqAnswer.classList.add('faq-answer');
-
-    faqQuestion.addEventListener('click', () => {
-      const isActive = faqQuestion.classList.contains('active');
-
-      if (isActive) {
-        faqQuestion.classList.remove('active');
-        faqAnswer.classList.remove('active');
-        // Set max-height to 0 for smooth closing
-        faqAnswer.style.maxHeight = '0';
+    faqQuestion.addEventListener('click', (e) => {
+      const currentFaq = e.currentTarget.classList.contains('active');
+      const openfaq = block.querySelector('.faq-question.active');
+      if (openfaq && !currentFaq) {
+        openfaq.classList.toggle('active');
+        openfaq.nextElementSibling.classList.toggle('active');
+      }
+      faqQuestion.nextElementSibling.style.removeProperty('max-height');
+      e.currentTarget.classList.toggle('active');
+      e.currentTarget.nextElementSibling.classList.toggle('active');
+      const faqAnswer = e.currentTarget.nextElementSibling;
+      if (faqAnswer.style.maxHeight) {
+        faqAnswer.style.removeProperty('max-height');
       } else {
-        faqQuestion.classList.add('active');
-        faqAnswer.classList.add('active');
-        // Set max-height to scrollHeight for smooth opening
         faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
       }
     });
-
-    // Close all accordions initially
-    faqQuestion.classList.remove('active');
-    faqAnswer.classList.remove('active');
-    faqAnswer.style.maxHeight = '0';
+    const faqAnswer = [...row.children][1];
+    faqAnswer.classList.add('faq-answer');
   });
 }