<div
    class="govuk-accordion"
    data-module="govuk-accordion"
    id="accordion-default"
>
    {% for accordion in accordions %}
        <div class="govuk-accordion__section">
            <div class="govuk-accordion__section-header">
                <h2 class="govuk-accordion__section-heading">
                    <span
                        class="govuk-accordion__section-button"
                        id="accordion-default-heading-{{ forloop.counter }}"
                    >
                        {{ accordion.title }}
                    </span>
                </h2>
            </div>
            <div
                id="accordion-default-content-{{ forloop.counter }}"
                class="govuk-accordion__section-content"
                aria-labelledby="accordion-default-heading-{{ forloop.counter }}"
            >
                <p class="govuk-body">
                    {{ accordion.content }}
                </p>
            </div>
        </div>
    {% endfor %}
</div>
