Accordion

<div class="panel-group" aria-multiselectable="true" id="accordion-example1" role="tablist">
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingOne" role="tab">
            <div class="panel-title"><a href="#collapseOne" aria-controls="collapseOne" aria-expanded="true"
                    data-parent="#accordion-example1" data-toggle="collapse" data-target="#collapseOne">Lorem Ipsum
                    Dolor Sit Amet</a></div>
        </div>
        <div class="panel-collapse collapse in" aria-labelledby="headingOne" id="collapseOne"
            data-parent="#accordion-example1" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingTwo" role="tab">
            <div class="panel-title"><a class="collapsed" href="#collapseTwo" aria-controls="collapseTwo"
                    aria-expanded="false" data-parent="#accordion-example1" data-toggle="collapse"
                    data-target="#collapseTwo">Donec molestie luctus condimentum</a></div>
        </div>
        <div class="panel-collapse collapse" aria-labelledby="headingTwo" id="collapseTwo"
            data-parent="#accordion-example1" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingThree" role="tab">
            <div class="panel-title"><a class="collapsed" href="#collapseThree" aria-controls="collapseThree"
                    aria-expanded="false" data-parent="#accordion-example1" data-toggle="collapse"
                    data-target="#collapseThree">Aliquam posuere vel risus id luctus</a></div>
        </div>
        <div class="panel-collapse collapse" aria-labelledby="headingThree" id="collapseThree"
            data-parent="#accordion-example1" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
</div>
             

Copy to clipboard

<div class="panel-group" aria-multiselectable="true" id="accordion-example1" role="tablist">
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingfour" role="tab">
            <div class="panel-title"><a href="#collapsefour" aria-controls="collapsefour" aria-expanded="true"
                    data-parent="#accordion-example1" data-toggle="collapse">Lorem Ipsum Dolor Sit Amet</a></div>
        </div>
        <div class="panel-collapse collapse in" aria-labelledby="headingfour" id="collapsefour" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingfive" role="tab">
            <div class="panel-title"><a class="collapsed" href="#collapsefive" aria-controls="collapsefive"
                    aria-expanded="false" data-parent="#accordion-example1" data-toggle="collapse">Donec molestie luctus
                    condimentum</a></div>
        </div>
        <div class="panel-collapse collapse" aria-labelledby="headingfive" id="collapsefive" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading panel-heading--trigger-icon" id="headingsix" role="tab">
            <div class="panel-title"><a class="collapsed" href="#collapsesix" aria-controls="collapsesix"
                    aria-expanded="false" data-parent="#accordion-example1" data-toggle="collapse">Aliquam posuere vel
                    risus id luctus</a></div>
        </div>
        <div class="panel-collapse collapse" aria-labelledby="headingsix" id="collapsesix" role="tabpanel">
            <div class="panel-body">Vivamus urna tellus, fringilla id placerat sed, Nam at velit vehicula. Cras a
                placerat lorem, nec tincidunt urna. Pellentesque non ipsum quam. Mauris varius purus nulla, non mollis
                nulla tristique convallis. Nam necfinibus neque.</div>
        </div>
    </div>
</div>
             

Copy to clipboard