Merge pull request #311 from saumyayadav25/user-saumya

FAQ enhancement

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5503
 }

index.html

@@ -366,31 +366,31 @@ <h1 class="faq-title">Frequently Asked Questions</h1>
 
         <div class="faq">
           <input type="checkbox" id="faq1">
-          <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools?</label>
+          <label for="faq1" class="faq-question">1. Does your website consist of all types of gaming tools? <span class="arrow"></span></label>
           <div class="faq-answer">
             We have tried our best to make all the tools available for enthusiastic gamers.
           </div>
         </div>
 
         <div class="faq">
           <input type="checkbox" id="faq2">
-          <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need?</label>
+          <label for="faq2" class="faq-question">2. If I'm having some purchased-product related issues, can the product be replaced as per my need? <span class="arrow"></span></label>
           <div class="faq-answer">
             By considering our terms and conditions, further actions will be taken.
           </div>
         </div>
 
         <div class="faq">
           <input type="checkbox" id="faq3">
-          <label for="faq3" class="faq-question">3. Can I buy multiple products at once?</label>
+          <label for="faq3" class="faq-question">3. Can I buy multiple products at once? <span class="arrow"></span></label>
           <div class="faq-answer">
             Yes, you are welcomed to buy multiple products at one time.
           </div>
         </div>
 
         <div class="faq">
           <input type="checkbox" id="faq4">
-          <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid?</label>
+          <label for="faq4" class="faq-question">4. Do you have any free courier services or is it paid? <span class="arrow"></span></label>
           <div class="faq-answer">
             Currently that option is unavailable. Sorry for the inconvenience.
           </div>

script.js

@@ -130,3 +130,15 @@ async function SendEmail(e) {
     alert("An error occurred while sending the email.");
   }
 }
+
+// faq
+document.querySelectorAll('.faq input[type="checkbox"]').forEach((checkbox) => {
+  checkbox.addEventListener('change', function () {
+    const answer = this.nextElementSibling.nextElementSibling; // FAQ answer div
+    if (this.checked) {
+      answer.style.maxHeight = answer.scrollHeight + 'px';
+    } else {
+      answer.style.maxHeight = '0px';
+    }
+  });
+});

style.css

@@ -1195,7 +1195,10 @@ button:hover img {
     border: none;
     border-radius: 5px;
     cursor: pointer;
-    display: block;
+    /* display: block; */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     transition: background-color 0.3s ease;
   }
 
@@ -1210,14 +1213,27 @@ button:hover img {
     background-color: #ffe0b5;
     color: #333;
     border-left: 4px solid #ff8552;
-    transition: max-height 0.4s ease;
+    transition: all 0.6s ease;
   }
 
   .faq input[type="checkbox"]:checked ~ .faq-answer {
     max-height: 150px;
     padding: 15px;
   }
-
+  .arrow {
+    margin-top: -3px;
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-right: 2px solid #fff;
+    border-bottom: 2px solid #fff;
+    transform: rotate(45deg);
+    transition: transform 0.3s ease;
+  }
+  /* Rotate arrow on FAQ open */
+  .faq input[type="checkbox"]:checked + label .arrow {
+    transform: rotate(225deg);
+  }
 
 /* Body styles for consistency */
 #review-body {