Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FIX] FAQ Section Glitches Fixed #889

Merged
merged 1 commit into from
Oct 17, 2024
Merged

[FIX] FAQ Section Glitches Fixed #889

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -393,15 +393,14 @@
margin-bottom: 15px;
width: 100%;
/* Full width by default */
background-color: #000000;
/* background-color: #000000; */
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
transition: background-color 0.3s ease;
transition: all 0.3s ease;
}
.faq:hover {
background-color: #e31616; /* Slight hover effect for FAQs */
}

.faq-question {
background-color: #e7ffe7;
color: #333;
Expand Down Expand Up @@ -774,8 +773,6 @@ <h2>Contact Us</h2>
<div class="faq-answer">
<p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
<p>Stay calm, ensure the patient is in a safe environment, and prepare any relevant medical information. If
possible, clear a path for the ambulance and stay on the line with emergency services if needed.</p>
</div>
</div>

Expand All @@ -784,26 +781,20 @@ <h2>Contact Us</h2>
<div class="faq-answer">
<p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
live map feature.</p>
<p>After requesting an ambulance, you can track it in real-time by logging into the system and accessing the
live map feature.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">What are the emergency protocols if an ambulance is delayed?</button>
<div class="faq-answer">
<p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
please contact emergency services for further instructions.</p>
<p>If the ambulance is delayed, you will receive updates through the system. In case of a significant delay,
please contact emergency services for further instructions.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">Can I provide medical information for the patient in advance?</button>
<div class="faq-answer">
<p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
the situation.</p>
<p>Yes, during your request, you can provide essential medical details to help paramedics prepare better for
the situation.</p>
</div>
</div>
<div class="faq">
Expand All @@ -826,15 +817,12 @@ <h2>Contact Us</h2>
<div class="faq-answer">
<p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
technical issue through the system or contact support.</p>
<p>If the ambulance location is not updating, try refreshing the page. If the issue persists, report a
technical issue through the system or contact support.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">Can I schedule an ambulance in advance?</button>
<div class="faq-answer">
<p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
<p>Yes, the system allows you to schedule an ambulance for non-emergency situations in advance.</p>
</div>
</div>
<div class="faq">
Expand Down Expand Up @@ -1021,20 +1009,27 @@ <h3 style="font-size: 1.5rem; margin-bottom: 10px; color: #2980b9;">
button.addEventListener('click', function () {
const faq = button.parentElement;
const answer = faq.querySelector('.faq-answer');

// Toggle active class

// Collapse all other answers
document.querySelectorAll('.faq').forEach(item => {
if (item !== faq) {
item.classList.remove('active');
item.querySelector('.faq-answer').style.maxHeight = '0';
}
});

// Toggle active class for clicked FAQ
faq.classList.toggle('active');

// Control the max-height for slide effect
if (faq.classList.contains('active')) {
answer.style.maxHeight = answer.scrollHeight + 'px'; // Set height based on content
answer.style.maxHeight = answer.scrollHeight + 'px';
} else {
answer.style.maxHeight = '0'; // Set height to zero to collapse
answer.style.maxHeight = '0';
}
});
});
});


//enabling the Dark mode toggle button added
document.addEventListener("DOMContentLoaded", () => {
const darkModeButton = document.getElementById("dark-mode-button");
Expand Down