329 multicolour accordion

blocks/multicolor-accordion/multicolor-accordion.css

@@ -0,0 +1,72 @@
+.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 .details-button {
+    background: var(--c-light-teal);
+    color: var(--c-dark-plum);
+    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;
+  }
+
+.accordion-trigger .details-button:hover {
+    border: 1px solid var(--c-light-teal);
+    background: none;
+    color: var(--c-light-teal);
+  }
+
+  .accordion-trigger .close-button {
+    border: 1px solid var(--c-light-teal);
+    background: none;
+    color: var(--c-light-teal);
+    border-radius: 16px;
+    font-weight: 600;
+    text-transform: uppercase;
+    padding: 8px 0;
+    cursor: pointer;
+    width: 9%;
+    font-size: 15px;
+  }
+
+.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,53 @@
+export default async function decorate(block) {
+  const accordionItems = block.querySelectorAll(':scope > div > div');
+  accordionItems.forEach((accordionItem) => {
+    const nodes = accordionItem.children;
+
+    const titleText = nodes[0];
+    const rest = Array.prototype.slice.call(nodes, 1);
+
+    const titleDiv = document.createElement('div');
+    const detailsBtn = document.createElement('button');
+    detailsBtn.innerText = 'Details';
+    detailsBtn.className = 'details-button';
+    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);
+  });
+
+  const triggers = block.querySelectorAll('.accordion-trigger');
+  triggers.forEach((trigger) => {
+    trigger.addEventListener('click', () => {
+      const openAttribute = 'aria-expanded';
+      const wasOpen = trigger.parentElement.hasAttribute(openAttribute);
+
+      triggers.forEach((_trigger) => {
+        const getDetailsBtn = _trigger.children[1];
+        getDetailsBtn.className = 'details-button';
+        getDetailsBtn.innerText = 'Details';
+        _trigger.parentElement.removeAttribute('aria-expanded');
+      });
+
+      if (!wasOpen) {
+        const closeBtn = trigger.children[1];
+        closeBtn.className = 'close-button';
+        closeBtn.innerText = 'close';
+        trigger.parentElement.setAttribute('aria-expanded', '');
+      }
+    });
+  });
+}