<section class="product-section faq" id="faq{{ loop.index }}"> <div class="container"> {% if title is defined and title is not empty %} <h2 class="faq__title">{{ title }}</h2> {% endif %} <div class="faq__all" id="accordion{{ loop.index }}"> {% if list is defined and list is not empty %} {% for item in list %} <div class="faq__item"> <div class="faq__header" id="heading{{ loop.index }}"> <h5 class="mb-0"> <button class="faq__headerTitle {{ (loop.index == 1 and loop.parent.loop.index == 1) ? '' : 'collapsed' }}" type="button" data-toggle="collapse" data-target="#collapse{{ loop.parent.loop.index ~ loop.index }}" aria-expanded="true" aria-controls="collapse{{ loop.index }}" > {{ item.faqItem.question }} <span class="faq__headerTitleIcon icon--chevron-bottom"></span> </button> </h5> </div> <div id="collapse{{ loop.parent.loop.index ~ loop.index }}" class="faq__content collapse {{ (loop.index == 1 and loop.parent.loop.index == 1) ? 'show' : '' }}" aria-labelledby="heading{{ loop.index }}" data-parent="#accordion{{ loop.parent.loop.index }}" > <div class="card-body faq__contentBody"> {{ item.faqItem.answer|raw }} </div> </div> </div> {% endfor %} {% endif %} </div> </div></section>