Forum

Thread tagged as: Configuration, Showcase

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>
Edwin Venhorst

Edwin Venhorst 0 points

  • 5 years ago

Nice. Thanks.

I create a bootstrap feather for perch several months ago. It has had many downloads so I'm guessing people have found it useful.

R. Ketter

Simon Clay

Simon Clay 127 points

Good work Edwin and thanks for sharing!