Hey Oqtane Community, In this blog, I'll guide you on how to create a Frequently Asked Questions (FAQ) section on your Oqtane website using the HTML Text module. This guide will break down each step to help you easily manage your FAQ content. We will also include code snippets so that you can quickly implement this feature.
Steps to Create an FAQ Section
Step 1: Add the HTML Text Module: First, you need to add the HTML Text module to your Oqtane page.
- Go to the page where you want to add the FAQ.
- Click the "Add Module" button on the top-right corner of the page.
- Select the HTML Text module from the list.
- Position the module where you want it to appear.
Step 2: Add FAQ HTML Code: Once you've added the HTML Text module, the next step is to add the HTML code that will create the FAQ section.
- Click the Edit button on the HTML Text module.
- Select HTML from the editor options to switch to the HTML editing mode.
- Now, copy and paste the following code into the editor:
<div class="container my-5 faq-container">
<h2 class="text-center mb-4">Frequently Asked Questions</h2>
<div id="faqAccordion">
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<i class="fa fa-plus toggle-icon"></i>
<span>What is the return policy?</span>
<div class="edit-delete-icons">
<i class="fa fa-edit edit-icon" title="Edit" onclick="editFAQ(1)"></i>
<i class="fa fa-trash delete-icon" title="Delete" onclick="deleteFAQ(1)"></i>
</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#faqAccordion">
<div class="card-body">
Our return policy allows returns within 30 days of purchase. Please ensure the item is in its original condition.
</div>
</div>
</div>
<!-- Add more FAQ items as needed -->
</div>
</div>
This code creates a clean FAQ section with an accordion-style list of questions. You can expand or collapse each FAQ by clicking on it.
Step 3: Customize Your FAQ: You can add more questions and answers by duplicating the <div class="card"> blocks and modifying the text inside.
For example, to add another FAQ about shipping, use this code:
<div class="card">
<div class="card-header collapsed d-flex justify-content-between align-items-center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus toggle-icon"></i>
<span>How long does shipping take?</span>
<div class="edit-delete-icons">
<i class="fa fa-edit edit-icon" title="Edit" onclick="editFAQ(2)"></i>
<i class="fa fa-trash delete-icon" title="Delete" onclick="deleteFAQ(2)"></i>
</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#faqAccordion">
<div class="card-body">
Shipping typically takes 5-7 business days, depending on your location.
</div>
</div>
</div>
Repeat this for as many questions as you want.
Step 4: Add Custom CSS: To make the FAQ section look more attractive, add some custom CSS. You can paste this CSS inside the style section in the same HTML Text module.
<style>
.faq-container {
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
padding: 2rem;
border-radius: 8px;
background-color: #fff;
}
.card-header {
cursor: pointer;
position: relative;
padding-left: 40px;
}
.card-header i {
transition: transform 0.2s;
}
.toggle-icon {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
}
.edit-delete-icons {
font-size: 1.2rem;
display: flex;
gap: 0.5rem;
}
.delete-icon {
color: red;
}
.edit-icon {
color: blue;
}
</style>
This CSS will style your FAQ section, making it look modern and responsive.
Step 5: Add JavaScript for FAQ Functionality: Next, add the JavaScript that handles the edit and delete functionality. You can add this inside a <script> tag after the HTML content.
<script>
// Toggle the plus/minus icon on collapse
document.querySelectorAll('#faqAccordion .card-header').forEach(function(header) {
header.addEventListener('click', function() {
const icon = this.querySelector('i.toggle-icon');
const isCollapsed = this.classList.contains('collapsed');
document.querySelectorAll('#faqAccordion .card-header i.toggle-icon').forEach(function(icon) {
icon.classList.remove('fa-minus');
icon.classList.add('fa-plus');
});
if (!isCollapsed) {
icon.classList.remove('fa-plus');
icon.classList.add('fa-minus');
}
});
});
// Edit FAQ Function
function editFAQ(id) {
alert("Edit FAQ with ID: " + id);
// Implement your logic to edit the FAQ
}
// Delete FAQ Function
function deleteFAQ(id) {
if (confirm("Are you sure you want to delete this FAQ?")) {
alert("Deleted FAQ with ID: " + id);
// Implement your logic to delete the FAQ
}
}
</script>
- Toggles the FAQ items when clicked.
- Alerts when the edit or delete buttons are clicked. You can replace the alert with actual edit or delete functionality if needed.
Step 6: Save the Module: Once you've added all the content, click the Save button in the HTML Text module.
Conclusion:
With these steps, you may effortlessly create an interactive FAQ section in your Oqtane site the usage of the HTML Text module. This technique gives you full manipulate over the HTML, CSS, and JavaScript, allowing you to personalize your FAQ as needed. Thank for reading, Stay tuned for such interesting blogs in future with SightSpeak AI.