From 5cb104dbe8dc25a4644c84f2923b156b7ce9e4ad Mon Sep 17 00:00:00 2001
From: praveenm1910 <praveenm191004@gmail.com>
Date: Fri, 20 Sep 2024 08:52:35 +0530
Subject: [PATCH] FAQs issue fixed

---
 css/style1.css | 14 +++++++++++++-
 js/script.js   | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 1 deletion(-)

diff --git a/css/style1.css b/css/style1.css
index 03384e1..d7a4ee5 100644
--- a/css/style1.css
+++ b/css/style1.css
@@ -1061,4 +1061,16 @@ input:checked + .clash .description {
 	  right: 8%;
 	  bottom: 15%;
 	}
-  }
\ No newline at end of file
+  }
+
+  /* FAQ smooth transition */
+  
+  .accordion-collapse {
+	transition: height 0.4s ease;
+	overflow: hidden;
+  }
+  
+  .accordion-collapse.show {
+	height: auto; /* Default height when the element is visible */
+  }
+  
diff --git a/js/script.js b/js/script.js
index ed54265..046b6b6 100644
--- a/js/script.js
+++ b/js/script.js
@@ -127,3 +127,50 @@ hamburger.className = 'hamburger';
 hamburger.innerHTML = '<span></span><span></span><span></span>';
 hamburger.onclick = toggleMenu;
 header.appendChild(hamburger);
+
+// FAQ transition js
+// Select all accordion buttons
+const accordionButtons = document.querySelectorAll('.accordion-button');
+
+// Loop through all accordion buttons
+accordionButtons.forEach(button => {
+  button.addEventListener('click', function () {
+    // Get the currently opened accordion item (if any)
+    const openAccordion = document.querySelector('.accordion-collapse.show');
+
+    // If there's an open accordion and it's not the one that was clicked, close it
+    if (openAccordion && openAccordion !== this.nextElementSibling) {
+      // Remove the 'show' class and apply smooth transition
+      openAccordion.style.height = openAccordion.scrollHeight + 'px';
+      window.getComputedStyle(openAccordion).height; // Force reflow
+      openAccordion.style.height = '0';
+      
+      openAccordion.addEventListener('transitionend', () => {
+        openAccordion.classList.remove('show');
+        openAccordion.style.height = null;
+      }, { once: true });
+
+      // Collapse the previous button
+      openAccordion.previousElementSibling.querySelector('.accordion-button').classList.add('collapsed');
+    }
+
+    // Toggle the clicked accordion item
+    const collapse = this.nextElementSibling;
+
+    if (!collapse.classList.contains('show')) {
+      // Expand the new accordion panel
+      collapse.classList.add('show');
+      collapse.style.height = '0';
+      window.getComputedStyle(collapse).height; // Force reflow
+      collapse.style.height = collapse.scrollHeight + 'px';
+
+      // Remove inline height after transition ends
+      collapse.addEventListener('transitionend', () => {
+        collapse.style.height = null;
+      }, { once: true });
+
+      // Toggle the collapsed state of the button
+      this.classList.remove('collapsed');
+    }
+  });
+});