From 2811477f24f9d43f91e6d4ecb563a625e054ab88 Mon Sep 17 00:00:00 2001 From: Tretiak-Anna Date: Wed, 1 May 2024 11:35:20 +0300 Subject: [PATCH 1/2] faq-accordeon with slowly close --- src/partials/faq/faq.css | 14 +++++++------- src/partials/faq/faq.js | 5 +++-- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/partials/faq/faq.css b/src/partials/faq/faq.css index a314334..0d8a959 100644 --- a/src/partials/faq/faq.css +++ b/src/partials/faq/faq.css @@ -21,15 +21,15 @@ .faq-item:last-child { margin-bottom: 0; } -.question .ac-panel { - display: none; -} + .question { display: flex; justify-content: space-between; align-items: center; } - +.question .ac-panel { + overflow: hidden; +} .question-header { font-weight: 600; font-size: 20px; @@ -81,18 +81,18 @@ .faq-item .ac-panel { max-height: 0; overflow: hidden; - transition: max-height 1.4s ease; } .faq-item.active .ac-panel { max-height: 300px; - animation: fade 1s ease-in-out; } .faq-item.active svg { transform: rotate(180deg); } + .faq-btn-icon { - transition: transform 0.5s ease-in; + transition: transform var(--Animation_arrow), + border-color var(--Animation_cubic), color var(--Animation_cubic); } /* =============TABLET====================== */ diff --git a/src/partials/faq/faq.js b/src/partials/faq/faq.js index 7a1b01c..432b576 100644 --- a/src/partials/faq/faq.js +++ b/src/partials/faq/faq.js @@ -1,7 +1,8 @@ import Accordion from 'accordion-js'; new Accordion('.accordion-container-faq', { - duration: 800, + duration: 900, showMultiple: true, + openOnInit: [0], }); document.addEventListener('DOMContentLoaded', function () { @@ -18,7 +19,7 @@ document.addEventListener('DOMContentLoaded', function () { btn.addEventListener('click', function () { if (content.style.display === 'flex') { - content.style.display = 'none'; + content.style.overflow = 'hidden'; } else { content.style.display = 'flex'; } From 30005c7305dda72a70658a67f00a51f88b35bfb9 Mon Sep 17 00:00:00 2001 From: Tretiak-Anna Date: Wed, 1 May 2024 11:48:47 +0300 Subject: [PATCH 2/2] +1 block can be opened --- src/partials/faq/faq.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/partials/faq/faq.js b/src/partials/faq/faq.js index 432b576..06893e2 100644 --- a/src/partials/faq/faq.js +++ b/src/partials/faq/faq.js @@ -2,7 +2,6 @@ import Accordion from 'accordion-js'; new Accordion('.accordion-container-faq', { duration: 900, showMultiple: true, - openOnInit: [0], }); document.addEventListener('DOMContentLoaded', function () {