Merge pull request #32 from gudzsv/feature/faq/accordeon+btn

add rotate on btn accordeon
gudzsv · Apr 29, 2024 · b6cd438 · b6cd438
2 parents 0ba8a9b + 3dd2219
commit b6cd438
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/partials/faq/faq.css b/src/partials/faq/faq.css
@@ -56,6 +56,9 @@
   transition: all var(--Animation_cubic);
 }
 
+.faq-item.active svg {
+  transform: rotate(180deg);
+}
 .faq-btn:hover {
   border-color: var(--Button_background);
   color: var(--Button_background);

diff --git a/src/partials/faq/faq.html b/src/partials/faq/faq.html
@@ -1,4 +1,4 @@
-<section class="faq">
+<section class="faq" id="faq-section">
   <div class="container">
     <h2 class="title-faq" id="faq">FAQ</h2>
     <ul class="faq-list">
@@ -14,7 +14,7 @@ <h3 class="question-header">
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>
@@ -38,7 +38,7 @@ <h3 class="question-header">
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>
@@ -62,7 +62,7 @@ <h3 class="question-header">What payment methods do you accept?</h3>
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>
@@ -84,7 +84,7 @@ <h3 class="question-header">How can I contact you</h3>
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>
@@ -106,7 +106,7 @@ <h3 class="question-header">Do you provide advice or support</h3>
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>
@@ -133,7 +133,7 @@ <h3 class="question-header">
                 Upward arrow consisting of two lines forming a triangle without
                 the bottom edge.
               </desc>
-              <use href="../../assets/svg/icons.svg#icon-arrow-about-me"></use>
+              <use href="/assets/svg/icons.svg#icon-arrow-about-me"></use>
             </svg>
           </button>
         </div>

diff --git a/src/partials/faq/faq.js b/src/partials/faq/faq.js
@@ -1,6 +1,12 @@
 import Accordion from 'accordion-js';
+
 document.addEventListener('DOMContentLoaded', function () {
   const accordionItems = document.querySelectorAll('.faq-item');
+  faqs.forEach(faq =>
+    faq.addEventListener('click', () => {
+      faq.classList.toggle('active');
+    })
+  );
 
   accordionItems.forEach(item => {
     const btn = item.querySelector('.faq-btn');
@@ -15,3 +21,4 @@ document.addEventListener('DOMContentLoaded', function () {
     });
   });
 });
+const faqs = document.querySelectorAll('.faq-item');