Add drop down tab on FAQ page

ELLB123
Excursionist
31 0 11

Hello

 

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

Screen Shot 2021-02-11 at 12.37.06 PM.png

paramSoft
Shopify Partner
1458 238 654

Please add me as a staff member

Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
KetanKumar
Shopify Partner
14401 1672 5182

@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 %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
ELLB123
Excursionist
31 0 11

Hello, 

 

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

Thank you,

ELLB123

KetanKumar
Shopify Partner
14401 1672 5182

@ELLB123 

Bay music merch _ Edit _ Debut _ Shopify (1).pngBay music merch _ Edit _ Debut _ Shopify (2).pngBay music merch _ Edit _ Debut _ Shopify.pngBay music merch _ Themes _ Shopify.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
ELLB123
Excursionist
31 0 11

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

0 Likes
KetanKumar
Shopify Partner
14401 1672 5182

@ELLB123 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes