Skip to content

Commit

Permalink
Merge pull request #112 from hlxsites/accordion
Browse files Browse the repository at this point in the history
Accordion margin issue fixed based on spacer and addded transition effect
  • Loading branch information
davenichols-DHLS authored Nov 13, 2023
2 parents 68368ae + 7911919 commit 29b452e
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 16 deletions.
8 changes: 4 additions & 4 deletions blocks/accordion/accordion.css
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ main .accordion {
main .accordion.faq-accordion>div {
border: 1px solid #dbdbdb;
border-radius: 5px;
margin-bottom: 14px;
}

main .accordion.spacer.faq-accordion>div {
margin-top: 7px;
main .spacer.faq-accordion>div {
/* margin-top: 7px; */
margin-bottom: 14px;
}


Expand Down Expand Up @@ -75,7 +75,7 @@ main .accordion.faq-accordion .faq-answer {
overflow: hidden;
font-size: 16px;
max-height: 0;
transition: all 0.2s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: left;
}

Expand Down
32 changes: 20 additions & 12 deletions blocks/accordion/accordion.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export default function decorate(block) {
const divCta = document.querySelector('div .cta');
block.classList.add('faq-accordion');
if (divCta) {
const expandCollapse = document.createElement('div');
expandCollapse.classList.add('expand_collapse');
Expand Down Expand Up @@ -29,17 +30,22 @@ export default function decorate(block) {
} 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 faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach((ele) => {
ele.nextElementSibling.style.maxHeight = '0';
});
setTimeout(() => {
const allQuestions = document.querySelectorAll('.faq-question');
allQuestions.forEach((ele) => {
ele.classList.remove('active');
ele.nextElementSibling.classList.remove('active');
ele.nextElementSibling.style.removeProperty('max-height');
});
}, 300);
}
});
}
const faqRows = [...block.children];
block.classList.add('faq-accordion');
faqRows.forEach((row) => {
const faqQuestion = [...row.children][0];
faqQuestion.classList.add('faq-question');
Expand All @@ -50,14 +56,16 @@ export default function decorate(block) {
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 {
e.currentTarget.classList.toggle('active');
if (e.currentTarget.classList.contains('active')) {
faqAnswer.classList.toggle('active');
faqAnswer.style.maxHeight = `${faqAnswer.scrollHeight}px`;
} else {
faqAnswer.style.maxHeight = 0;
setTimeout(() => {
faqAnswer.classList.toggle('active');
}, 300);
}
});
const faqAnswer = [...row.children][1];
Expand Down

0 comments on commit 29b452e

Please sign in to comment.