Merge pull request #87 from gudzsv/feature-acc

faq-accordeon with slowly close
gudzsv · May 1, 2024 · fdcc266 · fdcc266
2 parents 6357489 + 30005c7
commit fdcc266
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git 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
@@ -1,6 +1,6 @@
 import Accordion from 'accordion-js';
 new Accordion('.accordion-container-faq', {
-  duration: 800,
+  duration: 900,
   showMultiple: true,
 });
 
@@ -18,7 +18,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';
       }