How can I effectively build an accordion FAQ page with tabs?

Technical Q&A
1

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.

faq.PNG
faq.PNG991×761 109 KB

Any response would be appreciated.

Thanks in advance!!!

2

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 ''
      echo block.settings.title
      echo '

    endcapture
  endif
  if block.type == 'faq'
    assign faqCategoryHandle = block.settings.category | handle
    capture faqs
      echo faqs
      echo '
'
      echo block.settings.title
      echo '
'
      echo block.settings.answer
      echo '

'
    endcapture
  endif
endfor -%}

  {{- categories -}}

  {{- faqs -}}