Help! - Can't understand how to structure an FAQ

Doberquark
New Member
1 0 0

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.


<div class="faq-new">
 
 
  
  {% for block in section.blocks %}
 
  <div class="section">
              <div class="section-title">{{ block.settings.sectiontitle}}</div>
              </div>
              
 
              <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>        
  {%endfor%}
  
 
 
</div> 
 
{% schema %}
 
 
 
{
        "name": "FAQ-SECTION",
        "settings": [],
        "blocks" : [
              
{
                "type":"text",
                "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 %}



0 Likes
AlexHodzitsky
Shopify Partner
61 15 16

Hi Doberquark! Hope you are doing well!

Here's an example of how to do it:

Click to expand...
<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

I didn't choose the Shopify, the Shopify chose me.
0 Likes