Bootstrap accordion template for Perch

Hi,

I'm pretty new with Perch, but I think I'm getting the hang of it. Little by little. Today I took the Bootstrap accordion and made a Perch template of it. I figured it might come in handy for other newbies. Don't forget to choose 'allow multiple items' when assigning the template. Enjoy!

Best regards, Edwin

    <perch:before>
    <!-- Start Bootstrap accordion -->
    <section class="">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                    </perch:before>
                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading<perch:content id="perch_item_index" type="hidden" />">
                            <h3 class="panel-title">
                                <a <perch:if id="perch_item_index" value="2" match="gte">class="collapsed"</perch:if> role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<perch:content id="perch_item_index" type="hidden" />" aria-expanded="false" aria-controls="collapse<perch:content id="perch_item_index" type="hidden" />"><perch:content id="accordion_header" type="text" label="Accordion header" required="true" help="This header will be clickable. It expands the content below." /></a>
                            </h3>
                        </div>
                    <div id="collapse<perch:content id="perch_item_index" type="hidden" />" class="panel-collapse collapse<perch:if id="perch_item_index" value="1" match="eq"> in</perch:if>" role="tabpanel" aria-labelledby="heading<perch:content id="perch_item_index" type="hidden" />">
                        <div class="panel-body"><perch:content id="accordion_content" type="textarea" label="Accordion content" help="This content will be visible when its header is clicked." />
                        </div>
                    </div>
                    </div>
                <perch:after>
                </div>
            </div>
        </div>
    </div>
    </section>
    <!-- End Bootstrap accordion -->
    </perch:after>