From 30e0f92495a689e713a868eb394d4517a38e7a7b Mon Sep 17 00:00:00 2001
From: Mansi Sharma <yogesh11222211@gmail.com>
Date: Sun, 27 Oct 2024 10:32:16 +0530
Subject: [PATCH] Added FAQ Section

---
 FAQ.css    | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 FAQ.js     | 10 ++++++++++
 index.html | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 111 insertions(+)
 create mode 100644 FAQ.css
 create mode 100644 FAQ.js

diff --git a/FAQ.css b/FAQ.css
new file mode 100644
index 0000000..5bed2e3
--- /dev/null
+++ b/FAQ.css
@@ -0,0 +1,54 @@
+.faq-section {
+    width: 80%;
+    margin: 40px auto 0px;
+    padding: 20px;
+    background-color: #f4f4f9;
+    border-radius: 8px;
+}
+
+.faq-section h2 {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #2c3e50;
+    font-size: x-large;
+    border-bottom: 2px solid blue;
+    padding-bottom: 20px;
+}
+
+.faq-item {
+    border-bottom: 1px solid #dcdde1;
+    padding: 15px 0;
+}
+
+.question {
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
+    font-size: 1.1em;
+    font-weight: bold;
+    color: #2980b9;
+    align-items: center;
+    padding: 20px 38px;
+    padding-bottom: 11px;
+    border: none;
+}
+
+.question .icon {
+    font-size: 1.5em;
+    color: #2980b9;
+}
+
+.answer {
+    display: none;
+    margin: 10px 39px 9px;
+    font-size: 1.5em;
+    color: #7f8c8d;
+}
+
+.faq-item.active .answer {
+    display: block;
+}
+
+.faq-item.active .icon {
+    transform: rotate(45deg);
+}
diff --git a/FAQ.js b/FAQ.js
new file mode 100644
index 0000000..444cbce
--- /dev/null
+++ b/FAQ.js
@@ -0,0 +1,10 @@
+function toggleAnswer(question) {
+    const faqItem = question.parentElement;
+    
+    // Toggle the active class for this item
+    faqItem.classList.toggle("active");
+    
+    // Update the icon (+ to x)
+    const icon = faqItem.querySelector(".icon");
+    icon.textContent = faqItem.classList.contains("active") ? "×" : "+";
+}
diff --git a/index.html b/index.html
index 98f46f3..4e1640e 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,8 @@
         crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+    <link rel="stylesheet" href="FAQ.css">
+    <script src="FAQ.js"></script>
     <title>Swasthya Point</title>
     <style>
         body {
@@ -761,6 +763,51 @@ <h3><a class="social-icon__link" href="https://tushargupta1504.github.io/Medical
             </div>
 
         </div>
+        <div class="faq-section">
+    <h2>Frequently Asked Questions</h2>
+    <div class="faq">
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>What services does the platform offer?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>We offer online medical consultations, reliable health information, access to the latest diagnostic tests, stress management consultancy, and more.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>How can I book a medical consultation?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>You can easily book a consultation by signing up on our platform, selecting a specialist, and choosing an available time slot for the consultation.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>Are the consultations affordable?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>Yes, we offer a wide range of medical services at affordable prices to ensure accessibility for all.</p>
+            </div>
+        </div>
+
+        <div class="faq-item">
+            <div class="question" onclick="toggleAnswer(this)">
+                <h3>What medical fields are covered?</h3>
+                <span class="icon">+</span>
+            </div>
+            <div class="answer">
+                <p>We cover various medical fields, including Cardiology, Neurology, Hepatology, and many more.</p>
+            </div>
+        </div>
+    </div>
+</div>
+
         </div>
         </div>
         </section>