Skip to content

Commit

Permalink
Merge pull request #343 from 4F24L/faq-section
Browse files Browse the repository at this point in the history 
[FEAT] FAQ Section Added
  • Loading branch information
@vimistify
vimistify authored Oct 7, 2024
2 parents f97c97c + da8f288 commit f7f54f8
Show file tree
Hide file tree
Showing 2 changed files with 179 additions and 0 deletions.
175 changes: 175 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,92 @@
.red {
color: red; /* Change the color of letters in this class to red */
}


/* faq section styles */
.faq-section{
background-color: #e7f3fe;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

}



.faq-h2{
margin-bottom: 1.5rem;
font-size: 2.5rem;
font-weight: 600;
}

.faqs{
width: 100%;
}

.faq {
margin-bottom: 15px;
width: 100%; /* Full width by default */
background-color: #fff;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}

.faq-question {
background-color: #e7ffe7;
color: #333;
padding: 10px;
width: 100%;
text-align: left;
border: none;
outline: none;
cursor: pointer;
font-size: 16px;
font-weight: 600;

display: flex;
justify-content: space-between;
align-items: center;
}

.faq-question::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #333; /* Downward pointing wide "V" */
transition: transform 0.3s ease;

margin-right: 10px;
}

.faq.active .faq-question::after {
border-top: none;
border-bottom: 8px solid #333; /* Upward pointing wide "V" */
}

.faq-answer {
max-height: 0; /* Initially hidden */
overflow: hidden; /* Hide content when not visible */
padding: 0 10px;
background-color: #fff;
transition: max-height 0.3s ease; /* Smooth transition */
border-top: 1px solid #ccc;
}

.faq-answer p {
margin-bottom: 10px;
}

.faq.active .faq-answer {
max-height: 200px; /* Set to a sufficient height to display content */
padding: 10px; /* Adds padding when expanded */
}
</style>
</head>

Expand Down Expand Up @@ -377,6 +463,71 @@ <h2>Contact Us</h2>
<a href="contact.html" class="button">Go to Contact</a>
</div>
</div>

<!-- FAQ Section in Full Row -->

<div class="contact-feature faq-section">
<div class="faq-hd">
<div class="faq-h2">Frequently Asked Questions [ FAQs ]</div>
<!-- <div>Frequently Asked Questions</div> -->
</div>
<div class="faqs">

<div class="faq">
<button class="faq-question">What should I do while waiting for the ambulance?</button>
<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>
</div>
</div>
<div class="faq">
<button class="faq-question">How do I track an ambulance in real-time?</button>
<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>
</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>
</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>
</div>
</div>
<div class="faq">
<button class="faq-question">Are there any charges for using the ambulance tracking service?</button>
<div class="faq-answer">
<p>The ambulance tracking service is free of charge, but regular ambulance service fees may apply depending on the provider.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">How can I request special medical equipment or personnel on the ambulance?</button>
<div class="faq-answer">
<p>During your request, you can specify if the patient needs specific medical equipment or personnel, such as a ventilator or a specialized doctor.</p>
</div>
</div>
<div class="faq">
<button class="faq-question">What should I do if the location of the ambulance is not updating?</button>
<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>
</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>
</div>
</div>


</div>
</div>

<!-- FAQ section ends here -->

</div>
</div>
<footer>
Expand Down Expand Up @@ -449,5 +600,29 @@ <h3>Subscribe to Our Newsletter</h3>
});
};
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const faqButtons = document.querySelectorAll('.faq-question');

faqButtons.forEach(button => {
button.addEventListener('click', function() {
const faq = button.parentElement;
const answer = faq.querySelector('.faq-answer');

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

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


</script>
</body>
</html>
4 changes: 4 additions & 0 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,3 +471,7 @@ header {
}

/* Preloader Css Ends */

/* faq section */


0 comments on commit f7f54f8

Please sign in to comment.