<div class=“col col-12 blocks {% if include.object.style %}{{include.object.style}}{% endif %}”>

<div id="collapseSection" role="tablist" aria-multiselectable="true">
    {% for panel in include.object.panels %}
        <div class="card mb-3 border-0">
            <div class="card-header border" role="tab" id="section{{forloop.index}}Header">
                <h2 class="mb-0">
                    <button class="btn btn-link btn-block text-left text-dark {% unless forloop.first %}collapsed{% endunless %}" type="button" data-toggle="collapse" data-target="#section{{forloop.index}}Content"
                        aria-expanded="true" aria-controls="section{{forloop.index}}Content">
                        {{panel.title}}
                    </button>
                </h2>
            </div>
            <div id="section{{forloop.index}}Content" class="mt-3 collapse {% if forloop.first %}show{% endif %}" role="tabpanel" aria-labelledby="section{{forloop.index}}Header">
                <div class="card-body border">
                    {{panel.content | markdownify}}
                </div>
            </div>
        </div>
    {% endfor %}
</div>

</div>