FAQ Section for Shopify

liquid

<div class="container-fluid">
	<div class="row">
		<div class="col-12">
			<div class="container-fluid">
				<div id="container-category-faq">
					{% for block in section.blocks %}
					{% if block.type == 'header' %}
						<h3 id="category-faq-title" class="text-center">{{block.settings.header}}</h3>
					{% else %}
						<div class="panel panel-default">
							<div class="panel-heading" role="tab" id="heading-{{block.settings.id}}">
								<h4 class="panel-title">
									{% if block.settings.display == true %}
										<a role="button" data-toggle="collapse" href="#collapse-{{block.settings.id}}" aria-expanded="true" aria-controls="collapse-{{block.settings.id}}">
									{% else %}
										<a role="button" data-toggle="collapse" href="#collapse-{{block.settings.id}}" aria-expanded="false" aria-controls="collapse-{{block.settings.id}}">
									{% endif %}
										{{block.settings.question}}
									</a>
								</h4>
							</div>
							{% if block.settings.display == true %}
								<div id="collapse-{{block.settings.id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-{{block.settings.id}}">
							{% else %}
								<div id="collapse-{{block.settings.id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{block.settings.id}}">
							{% endif %}
								<div class="panel-body">
									{{block.settings.answer}}
								</div>
							</div>
						</div>
					{% endif %}
					{% endfor %}
				</div>
			</div>
		</div>
	</div>
</div>
{% schema %}
{
    "name": "FAQ",
    "settings": [],
	"blocks": [
		{
			"type": "header",
			"name": "Header",
			"settings": [{
					"type": "header",
					"content": "Header"
				},
				{
					"type": "text",
					"id": "header",
					"label": "Header"
				}
			]
		},
		{
            "type": "slide",
            "name": "Question",
            "settings": [{
                    "type": "header",
                    "content": "Question Item"
                },
                {
                    "type": "text",
                    "id": "id",
                    "label": "id — text"
				},
				{
					"type":      "checkbox",
					"id":        "display",
					"label":     "Display Answer",
					"default":   false
				 },
                {
                    "type": "text",
                    "id": "question",
                    "label": "Question — text"
                },
                {
                    "type": "html",
                    "id": "answer",
                    "label": "Answer — html"
                }
            ]
        }
    ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}