diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css index 27e6cf91..1a33a29e 100644 --- a/blocks/accordion/accordion.css +++ b/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 { diff --git a/blocks/accordion/accordion.js b/blocks/accordion/accordion.js index 4c4f29f0..71e5439a 100644 --- a/blocks/accordion/accordion.js +++ b/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'); }); } diff --git a/blocks/articlecards/articlecards.css b/blocks/articlecards/articlecards.css index c330185e..61597530 100644 --- a/blocks/articlecards/articlecards.css +++ b/blocks/articlecards/articlecards.css @@ -9,7 +9,7 @@ .wrapper{ display: grid; grid-template-columns: 1fr 1fr; - grid-gap: 2.25rem; + grid-gap: 2.50rem; } @media only screen and (max-width: 768px) { @@ -22,7 +22,8 @@ ul.posts li.post:not(:first-child){ display: flex; flex-direction: row; align-items: flex-start; - gap: 0.75rem; + gap: 1rem; + margin-bottom: 20px; } ul.posts li.post:before { @@ -30,8 +31,8 @@ ul.posts li.post:before { } ul.posts li.post:not(:first-child) a.article-card-img{ - flex-shrink: 0.9; padding: 20px 0 0; + min-width: 188px; } .article-card-body a{ @@ -170,6 +171,10 @@ ul.posts li.post:not(:first-child) .description { font-size: 14px; } +ul.posts li.post:not(:first-child) .description { + letter-spacing: 0.005em; +} + ul.posts li.post:first-child .entry-title { font-size: 18px; } @@ -182,6 +187,10 @@ ul.posts li.post:first-child .article-card-img img { height: 264px; } +ul.posts li.post{ + padding: 0; +} + @media only screen and (max-width: 479px) { .horizontal .article-card { flex-direction: column!important; @@ -190,6 +199,22 @@ ul.posts li.post:first-child .article-card-img img { .horizontal .article-card .article-card-img img { max-width: 100%!important; } + + .wrapper{ + grid-gap: 0; + } + + ul.posts li.post:not(:first-child){ + display: block; + } + + ul.posts li.post:first-child .article-card-img img { + height: auto; + } + + ul.posts li.post:not(:first-child) a.article-card-img{ + min-width: 100%; + } } @media (min-width: 479px) and (max-width: 767px) {