Liquid, JavaScript, themes, sales channels
Hey Guys,
I need to start off by saying I`m not a developer. I`m a designer who had to start coding this weekend cause the client needed the job done pretty quickly and the developer has other things to do but I managed to get till this point. Here it is
The client wanted an FAQ section with an accordeon effect which I managed to recreate following a tutorial online.
I managed to get the sections together and customize the schema file to how the client needs it until she wants to separate the Q&A by groups with titles. It took me a while but I managed to get that done after quite a bit of trial and error. The unfortunate reality is that from what I understand now the block considers both divs even if I only add the TITLE (meaning it will add the + toggle after the title itself). The "GENERAL INFORMATION" should only be a title and nothing else but for some reason that + checkmark appears and I have no idea how to structure it so that it only shows up in the "Question" and "Answer" title.
https://gourmetattitude.com/pages/faq-1
Here is the way I structured the code Not sure how to go from here to achieve what I need with is simply to separate the FAQs with titles.
Hi Doberquark! Hope you are doing well!
Here's an example of how to do it:
<div class="faq-new">
{% for block in section.blocks %}
{% case block.type %}
{% when 'question' %}
<div class="tab">
<input type="checkbox" id="tab{{ forloop.index }}" class="tab-toggle">
<label for="tab{{ forloop.index }}" class="tab-label">
{{- block.settings.question -}}
</label>
<div class="tab-content">
{{- block.settings.answer -}}
</div>
</div>
{% when 'title' %}
<div class="section">
<div class="section-title">
{{- block.settings.sectiontitle -}}
</div>
</div>
{% endcase %}
{% endfor %}
</div>
{% schema %}
{
"name": "FAQ-SECTION",
"settings": [],
"blocks": [
{
"type": "question",
"name": "Question/Answer",
"settings": [
{
"id": "question",
"type": "text",
"label": "the question"
},
{
"id": "answer",
"type": "richtext",
"label": "the answer"
}
]
},
{
"type": "title",
"name": "Add title",
"settings": [
{
"id": "sectiontitle",
"type": "text",
"label": "The Title"
}
]
}
]
}
{% endschema %}
Hope that helps.
Alex
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024