Skip to content

Commit

Permalink
update accordion.
Browse files Browse the repository at this point in the history
  • Loading branch information
wildone committed Aug 9, 2024
1 parent babdd97 commit 0b223ce
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 10 deletions.
40 changes: 30 additions & 10 deletions blocks/accordion/accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,26 +4,46 @@
* https://www.hlx.live/developer/block-collection/accordion
*/

import {
div, h2, input, label, span,

Check failure on line 8 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'div' is defined but never used

Check failure on line 8 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'h2' is defined but never used

Check failure on line 8 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'input' is defined but never used

Check failure on line 8 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'label' is defined but never used

Check failure on line 8 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'span' is defined but never used
} from '../../scripts/dom-builder.js';
import { generateUUID } from '../../scripts/scripts.js';
import { decorateIcons } from '../../scripts/aem.js';

Check failure on line 11 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'decorateIcons' is defined but never used

function hasWrapper(el) {

Check failure on line 13 in blocks/accordion/accordion.js

View workflow job for this annotation

GitHub Actions / build

'hasWrapper' is defined but never used
return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
}

export default function decorate(block) {
const accordionUUID = `accordion-${generateUUID()}`;
block.setAttribute('id', accordionUUID);
[...block.children].forEach((row) => {
// decorate accordion item label
const label = row.children[0];
const itemTitle = row.querySelector(':scope > div > h5');

// is title for the accordion
const isTitle = itemTitle && itemTitle.getAttribute('id') === 'title';
if (isTitle) {
row.remove();
return;
}

// get title and content
const title = itemTitle.innerHTML;

const paragraphs = Array.from(row.querySelector(':scope > div:nth-child(2)').children).slice(1);

const summary = document.createElement('summary');
summary.className = 'accordion-item-label';
summary.append(...label.childNodes);
if (!hasWrapper(summary)) {
summary.innerHTML = `<p>${summary.innerHTML}</p>`;
}
summary.innerHTML = `<p>${title}</p>`;

// decorate accordion item body
const body = row.children[1];
const body = document.createElement('div');
body.className = 'accordion-item-body';
if (!hasWrapper(body)) {
body.innerHTML = `<p>${body.innerHTML}</p>`;
}
// for each paragraph, append to body
[...paragraphs].forEach((paragraph) => {
body.appendChild(paragraph);
});

// decorate accordion item
const details = document.createElement('details');
details.className = 'accordion-item';
Expand Down
1 change: 1 addition & 0 deletions icons/icon-caret.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
64 changes: 64 additions & 0 deletions styles/styles.section.faq.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,67 @@ main .section.faq h3 em {
padding: 0;
}
}

main .section.faq .accordion details[open] summary::after {
transform: translateY(-50%) rotate(90deg);
}
main .section.faq .accordion details summary::after {
content: '';
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%) rotate(0);
-ms-transform: translateY(-50%) rotate(0);
transform: translateY(-50%) rotate(0);
right: 0px;
z-index: 100;
display: inline-block;
color: transparent;
font-size: 20px;
font-weight: 700;
pointer-events: none;
width: 48px;
height: 27px;
background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDMiIGhlaWdodD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQwLjE4NCAyLjA5MkwyMS4wOTIgMjEuMTg0IDIgMi4wOTIiIHN0cm9rZT0iI0U2RkYwMCIgc3Ryb2tlLXdpZHRoPSI0IiBmaWxsPSJub25lIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}

main .section.faq .accordion details summary {
padding: 18px 60px 18px 0;
font-size: 26px;
overflow: hidden;

}


main .section.faq .accordion .accordion-item {
border: 0px;
border-bottom: 1px solid #fff;
}
main .section.faq .accordion .accordion-item .accordion-item-label p {
padding-bottom: 0%;
margin-bottom: 0%;
}

main .section.faq .accordion details[open] summary {
background-color: transparent;
}

main .section.faq .accordion details summary:focus,
main .section.faq .accordion details summary:hover {
background-color: transparent;
}

main .section.faq .accordion details[open] .accordion-item-body {
border-top: 0px;
padding-left: 0%;
padding: 0 50px 15px 0;
background-color: transparent;
border-top: 0;
max-width: 750px;
}

0 comments on commit 0b223ce

Please sign in to comment.