FAQs Section

{% comment %}
	Display a section containing a single short FAQ list (accordion or list)

	Inputs:
		section_class
		section_id

	Custom Fields:
		faqs - collection or list of FAQ datastore items
		faqs_title
		faqs_subtitle

	Outputs:
		section_rendered - true when this section outputs markup, false otherwise
{% endcomment -%}
{%- if entity.faqs.is_valid -%}
	<section{% if section_class %} class="{{ section_class }}"{% endif %}{% if section_id %} id="{{ section_id }}"{% endif %}>
		<div class="container">
			{%- var headinglevel = headinglevel %}{% comment %}Copy to current scope{% endcomment -%}
			{%- include "/common/_title_with_subtitle.liquid" title:entity.faqs_title subtitle:entity.faqs_subtitle postincrement_headinglevel:true -%}
			{%- include "/partials/_faqs_list.liquid" faqs: entity.faqs -%}
		</div>
	</section>
	{%- set section_rendered = true -%}
{%- else -%}
	{%- set section_rendered = false -%}
{%- endif -%}

[
  {
    "Type": "group",
    "Fields": [
      {
        "Type": "text",
        "FieldID": "faqs_title",
        "Label": "Title",
        "DefaultValue": "Frequently Asked Questions",
        "IsRequired": true,
        "Condition": {
          "Type": "exists",
          "FieldID": "faqs"
        }
      },
      {
        "Type": "text",
        "FieldID": "faqs_subtitle",
        "Label": "Subtitle/Description",
        "Condition": {
          "Type": "exists",
          "FieldID": "faqs"
        }
      },
      {
        "Type": "datastoreitemlist",
        "FieldID": "faqs",
        "Label": "FAQs"
      }
    ],
    "Label": "FAQs"
  }
]

{% comment %}
	Outputs a list of FAQ items as an accordion

	Inputs:
		faqs - a list or collection of FAQ datastore items
{% endcomment -%}
{%- if faqs is_valid -%}
	{%- var headingtag = 'p' %}{% comment %}Copy to current scope{% endcomment -%}
	{%- include '/common/_headinglevel.liquid' -%}

	<div class="accordion accordion-flush" id="{% id accordionId output_to_template = prefix:'faqs_' %}">
		{%- for faq in faqs -%}
			{%- id var headerId = prefix:'faq_h' -%}
			{%- id var collapseId = prefix: 'faq_b' -%}
			<div class="accordion-item border rounded-3 mb-3 overflow-hidden bg-white">
				<{{headingtag}} class="accordion-header" id="{{headerId}}">
					<button class="accordion-button collapsed bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#{{collapseId}}" aria-expanded="false" aria-controls="{{collapseId}}">{{faq.question | default: faq.title}}</button>
				</{{headingtag}}>
				<div id="{{collapseId}}" class="accordion-collapse collapse" data-bs-parent="#{{accordionId}}" aria-labelledby="{{headerId}}">
					<div class="accordion-body">{{faq.answer | default: faq.content_html}}</div>
				</div>
			</div>
		{%- endfor -%}
	</div>
{%- endif -%}