329 multicolour accordion

blocks/multicolor-accordion/multicolor-accordion.css

@@ -0,0 +1,68 @@
+.accordion-item {
+    padding: 0 16px;
+    margin-bottom: 20px;
+}
+
+.accordion-trigger {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    line-height: 40px;
+    font-size: 34px;
+    height: 80px;
+    color: var(--c-white);
+    font-weight: 700;
+}
+
+.multicolor-accordion>div:nth-child(odd) { 
+  background: var(--c-dark-plum);
+}
+
+.multicolor-accordion>div:nth-child(even) { 
+    background: var(--c-dark-blue);
+  }
+
+  .accordion-trigger .btn {
+    border-radius: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 8px 0;
+    cursor: pointer;
+    width: 9%;
+    font-size: 15px;
+    border: 1px solid var(--c-light-teal);
+    transition: 0.5s;
+    margin-left: auto;
+  }
+
+.accordion-trigger .details-button {
+    background: var(--c-light-teal);
+    color: var(--c-dark-plum);
+  }
+
+.accordion-trigger .details-button:hover {
+    border: 1px solid var(--c-light-teal);
+    background: none;
+    color: var(--c-light-teal);
+  }
+
+  .accordion-trigger .close-button {
+    background: none;
+    color: var(--c-light-teal);
+  }
+
+.accordion-trigger > p {
+    display: inline-flex;
+    width: calc(100% - 40px);
+}
+
+.accordion-content {
+    transition: max-height .3333s;
+    max-height: 0;
+    overflow: hidden;
+    color: var(--c-white);
+}
+
+[aria-expanded] .accordion-content {
+    max-height: 1000px;
+}

blocks/multicolor-accordion/multicolor-accordion.js

@@ -0,0 +1,61 @@
+function setLabel(label, btnText, btn) {
+  btn.className = 'btn details-button';
+  if (label === 'Button Label') {
+    btn.innerText = btnText;
+  } else {
+    btn.innerText = 'Details';
+  }
+}
+
+export default async function decorate(block) {
+  const accordionItems = block.querySelectorAll(':scope > div');
+  accordionItems.forEach((accordionItem) => {
+    const nodes = accordionItem.children;
+
+    const buttonLabelRow = [...block.lastElementChild.children];
+    const btnLabel = buttonLabelRow[0].textContent;
+    const btnLabelText = buttonLabelRow[1].textContent;
+    buttonLabelRow[0].className = 'config-hidden';
+
+    const titleText = nodes[0];
+    const rest = [].slice.call(nodes, 1);
+
+    const titleDiv = document.createElement('div');
+    const detailsBtn = document.createElement('button');
+
+    setLabel(btnLabel, btnLabelText, detailsBtn);
+
+    titleDiv.append(titleText, detailsBtn);
+    titleDiv.classList.add('accordion-trigger');
+
+    const content = document.createElement('div');
+    content.classList.add('accordion-content');
+    rest.forEach((elem) => {
+      content.appendChild(elem);
+    });
+
+    const newItem = document.createElement('div');
+    newItem.appendChild(titleDiv);
+    newItem.appendChild(content);
+
+    newItem.classList.add('accordion-item');
+
+    accordionItem.replaceWith(newItem);
+
+    titleDiv.addEventListener('click', () => {
+      const openAttribute = 'aria-expanded';
+      const wasOpen = titleDiv.parentElement.hasAttribute(openAttribute);
+      titleDiv.parentElement.toggleAttribute(openAttribute);
+
+      if (!wasOpen) {
+        const closeBtn = titleDiv.children[1];
+        closeBtn.className = 'btn close-button';
+        closeBtn.innerText = 'close';
+      } else {
+        setLabel(btnLabel, btnLabelText, detailsBtn);
+      }
+    });
+  });
+  const configHidden = block.querySelector('.config-hidden');
+  configHidden.parentElement.remove();
+}