{% block element_accordion %}
<div class="gshop-accordion accordion mt-5 product-detail-accordion" id="accordionExample">
{% for tab in element.config.tabs.value %}
<div class="card">
<div class="header" id="tab{{ loop.index }}">
<h2 class="mb-0">
<button class="btn btn-link btn-block pl-0 text-left{% if not loop.first %} collapsed{% endif %}" type="button" data-toggle="collapse" data-target="#collapse{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="collapse{{ loop.index }}">
{{ tab.title }}
</button>
</h2>
</div>
<div id="collapse{{ loop.index }}" class="collapse{% if loop.first %} show{% endif %}" aria-labelledby="tab{{ loop.index }}" data-parent="#accordionExample">
<div class="card-body pb-2">
{{ tab.content|raw }}
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}