Accordian FAQ page with tabs above

[batulkr]

Hello everyone,

Recently I have been trying to built an accordian FAQ page for my client. I have read so many articles and made so many experiments but I have been constantly failing to build the section. I would appreciate if you could help me how to get started with sections in order to satisfy my client's expectations. I have a decent knowledge with liquid sections but I am feeling there is something missing so maybe one of you could help me.

Here is what the section I want to create llok like. The styling won't be the same, just the structure matters for me.

Any response would be appreciated.

Thanks in advance!!!

[gina-gregory]

I usually make one 'faq' section with 2 block types. One block type for the category and one block type for the FAQ. Maybe something like this:

"blocks: [
  {
    "type": "category",
    "name": "Category",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Category Name"
      }
    ]
  },
  {
    "type": "faq",
    "name": "FAQ",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Question"
      },
      {
        "type": "richtext",
        "id": "answer",
        "label": "Answer"
      },
      {
        "type": "text",
        "id": "category",
        "label": "Category"
      }
    ]
  }
]

Use javascript to show/hide the right FAQs based on the data-category value.

{%- liquid for block in section.blocks
  if block.type == 'category'
    assign categoryHandle = block.settings.title | handle
    capture categories
      echo categories
      echo '<div class="category" data-category="' | append: categoryHandle | append: '">'
      echo block.settings.title
      echo '</div>
    endcapture
  endif
  if block.type == 'faq'
    assign faqCategoryHandle = block.settings.category | handle
    capture faqs
      echo faqs
      echo '<div class="faq" data-category="' | append: faqCategoryHandle | append: '"><div class="faq__question">'
      echo block.settings.title
      echo '</div><div class="faq__answer">'
      echo block.settings.answer
      echo '</div></div>'
    endcapture
  endif
endfor -%}

<div class="faq-categories">
  {{- categories -}}
</div>
<div class="faq-content">
  {{- faqs -}}
</div>