Just update the contents of your FAQ.liquid with the code below 🙂
{% schema %}
{
"name": "FAQ Section by LAUNCHTIP",
"settings": [
{
"type": "text",
"id": "title",
"label": "Section Title",
"default": "Frequently Asked Questions"
}
],
"blocks": [
{
"type": "faq",
"name": "FAQ Item",
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "What is your return policy?"
},
{
"type": "richtext",
"id": "answer",
"label": "Answer",
"default": "<p>We offer a 30-day return policy for all unused items in original packaging.</p>"
}
]
}
],
"presets": [
{
"name": "FAQ Section",
"blocks": [
{
"type": "faq"
},
{
"type": "faq"
},
{
"type": "faq"
}
]
}
]
}
{% endschema %}
<div id="faq-section-{{ section.id }}" class="faq-section">
<div class="faq-container">
<h2 class="faq-title">{{ section.settings.title }}</h2>
<div class="faq-list">
{% for block in section.blocks %}
<div class="faq-item" {{ block.shopify_attributes }}>
<button class="faq-question">
{{ block.settings.question }}
<svg class="faq-icon" viewBox="0 0 24 24" width="24" height="24">
<path d="M19 8.5L12 15.5L5 8.5" stroke="currentColor" fill="none" stroke-width="2"/>
</svg>
</button>
<div class="faq-answer">
{{ block.settings.answer }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
<style>
.faq-section {
padding: 60px 20px;
max-width: 800px;
margin: 0 auto;
}
.faq-title {
text-align: center;
margin-bottom: 40px;
font-size: 32px;
font-weight: 600;
color: #1a1a1a;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
border: 1px solid #e5e5e5;
border-radius: 8px;
overflow: hidden;
}
.faq-question {
width: 100%;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
text-align: left;
font-size: 16px;
font-weight: 500;
color: #1a1a1a;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-question:hover {
background-color: #f8f9fa;
}
.faq-icon {
transition: transform 0.3s ease;
flex-shrink: 0;
}
.faq-item.active .faq-icon {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 20px;
}
.faq-item.active .faq-answer {
max-height: 500px;
padding: 0 20px 20px;
}
.faq-answer p {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #4a4a4a;
}
@media screen and (max-width: 768px) {
.faq-section {
padding: 40px 16px;
}
.faq-title {
font-size: 28px;
margin-bottom: 32px;
}
.faq-question {
padding: 16px;
font-size: 15px;
}
.faq-item.active .faq-answer {
padding: 0 16px 16px;
}
}
</style>
<script>
(function() {
// Use section ID to create a scoped selector
var sectionId = "faq-section-{{ section.id }}";
var sectionEl = document.getElementById(sectionId);
if (sectionEl) {
var faqQuestions = sectionEl.querySelectorAll('.faq-question');
faqQuestions.forEach(function(button) {
button.addEventListener('click', function() {
var faqItem = this.closest('.faq-item');
var wasActive = faqItem.classList.contains('active');
// Close all FAQ items in THIS SECTION ONLY
sectionEl.querySelectorAll('.faq-item').forEach(function(item) {
item.classList.remove('active');
});
// Toggle clicked item
if (!wasActive) {
faqItem.classList.add('active');
}
});
});
}
})();
</script>
The issue was that the original code was selecting all .faq-item elements on the entire page with document.querySelectorAll('.faq-item'). When you clicked a question in any FAQ section, it would close all items in all sections.
With the updated code, when you click on a question in one section, it will only affect other questions within the same section. Each section now has its own isolated JavaScript that only targets elements within its own container.
Cheers!
Shubham | Untechnickle
Helping for free: hello@untechnickle.com
Don't forget to say thanks, it'll make my day - just send me an email!
Get Revize for Free | Let your shoppers edit orders post-purchase | Get Zero Support Tickets | #1 Order Editing + Upsell App
