Add drop down tab on FAQ page

[ELLB123]

Hello

I would like to add drop-down tabs on my FAQ landing page, like this:

[paramSoft]

Please add me as a staff member

[KetanKumar]

@ELLB123 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

can you please creat first custom faq page  after create new section then add below code 

<section class="accordion faq">
	{% if section.settings.title %}
    <p style="text-align: center; font-style: italic;">{{ section.settings.title }}</p>
    {% endif %}
  
    {% for block in section.blocks %}
      {% capture index %}{% increment ind %}{% endcapture %}

        <input id="tab-{{ index }}" type="checkbox" name="faqs" class="hidden">
        <div class="section section-{{ section.id }} {% if forloop.first == true %}opened{% endif %} mar-top-sm" data-block-id="{{ block.id }}" {{ block.shopify_attributes }}>
          <label for="tab-{{ index }}" class="tab-opener">
            <h3 class="faq-question">{{ block.settings.title | escape }}</h3>
          </label>
          <div class="faq-answer mar-bot-sm">{{ block.settings.content }}</div>   

        </div>

    {% endfor %}
</section>


{% schema %}
{
  "name": "Accordions",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Optional Header",
      "default": "Accordion Header"
    }
  ],
  "blocks": [
    {
      "type": "accordion",
      "name": "Accordion",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "default": "Accordion Header",
          "label": "Accordion Header"
        },
        {
          "type": "richtext",
          "id": "content",
          "default": "<p>This section doesn’t currently include any content. <b>Add content to this section using the sidebar in the customizer.</b></p>",
          "label": "Accordion Content"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet 'scss' %}
.faq {
  margin-top: 40px;
  input {
    display: none;
  }
  label {
    display: flex;
  }
  label:before {
    content: "+";
    display: inline-block;
    width: 15px;
    margin-right: 10px;
    text-align: center;
    font-size: 20px;
    line-height: 1.2;
    font-weight: bold;
  }
  p {
    padding-left: 25px;
  }
  label h3 {
    display: inline-block;
    font-size: 20px;
  }
  input:checked + div > label:before {
    content: "-";
  }
  input + div > div {
    display: none;
  } 
  input:checked + div > div {
    display: block;
  }
}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

[ELLB123]

Hello, 

Can you explain how to "create first custom faq page  after create new section then add below code"?

Thank you,

ELLB123

[KetanKumar]

@ELLB123 

[ELLB123]

Hello, 

Thank you for the coding, however there is an error message that comes up when I try this unfortunately.

Do you have any other idea?

Thank you

ELLB123

[KetanKumar]

@ELLB123 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like