<div class="clearfix container-fluid"></div>

<!-- Start of Accordion 1 -->
<!-- NB: If you require more than one accordion on the same page, replace all instnaces of "accordion-1" with accordion-2" (etc) -->
<div class="accordion" id="accordion-1">

    <!-- Start of Item 1 -->
    <div class="card" style="margin: .5rem .5rem 0 .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-1-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-1-1" aria-expanded="false" aria-controls="collapse-1-1"> Heading for item 1 </button> </h5>
        </div>
        <div id="collapse-1-1" class="collapse" aria-labelledby="heading-1-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 1</p>
            </div>
        </div>
    </div>
    <!-- End of Item 1 -->

    <!-- Start of Item 2 -->
    <div class="card" style="margin: 0 .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-2-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-2-1" aria-expanded="false" aria-controls="collapse-2-1"> Heading for item 2 </button> </h5>
        </div>
        <div id="collapse-2-1" class="collapse" aria-labelledby="heading-2-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 2</p>
            </div>
        </div>
    </div>
    <!-- End of Item 2 -->

    <!-- Start of Item 3 -->
    <div class="card" style="margin: 0 .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-3-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-3-1" aria-expanded="false" aria-controls="collapse-3-1"> Heading for item 3 </button> </h5>
        </div>
        <div id="collapse-3-1" class="collapse" aria-labelledby="heading-3-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 3</p>
            </div>
        </div>
    </div>
    <!-- End of Item 3 -->

    <!-- Start of Item 4 -->
    <div class="card" style="margin: 0 .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-4-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-4-1" aria-expanded="false" aria-controls="collapse-4-1"> Heading for item 4 </button> </h5>
        </div>
        <div id="collapse-4-1" class="collapse" aria-labelledby="heading-4-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 4</p>
            </div>
        </div>
    </div>
    <!-- End of Item 4 -->

    <!-- Start of Item 5 -->
    <div class="card" style="margin: 0 .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-5-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-5-1" aria-expanded="false" aria-controls="collapse-5-1"> Heading for item 5 </button> </h5>
        </div>
        <div id="collapse-5-1" class="collapse" aria-labelledby="heading-5-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 5</p>
            </div>
        </div>
    </div>
    <!-- End of Item 5 -->

    <!-- Start of Item 6 -->
    <div class="card" style="margin: 0 .5rem .5rem .5rem; box-shadow: none; border: 1px solid #dee2e6;">
        <div class="card-header" id="heading-6-1" style="padding: 0.5rem 0.25rem;">
            <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse-6-1" aria-expanded="false" aria-controls="collapse-6-1"> Heading for item 6 </button> </h5>
        </div>
        <div id="collapse-6-1" class="collapse" aria-labelledby="heading-6-1" data-parent="#accordion-1">
            <div class="card-body">
                <p>Content for item 6</p>
            </div>
        </div>
    </div>
    <!-- End of Item 6 -->

</div>
<!-- End of Accordion -->