Accordions

Extend the default collapse behaviour to create an accordion.

<div id="accordion-1" role="tablist" aria-multiselectable="true">
    <div class="card card-white">
        <div class="card-header" role="tab" id="heading-1">
            <h5 class="mb-0">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
                    Basic tabs
                </a>
            </h5>
        </div>
        <div id="collapse-1" class="collapse show" role="tabpanel" aria-labelledby="heading-1">
            <div class="card-block">
                <p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
            </div>
        </div>
    </div>
    <div class="card card-white">
        <div class="card-header" role="tab" id="heading-2">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
                    Closed item
                </a>
            </h5>
        </div>
        <div id="collapse-2" class="collapse" role="tabpanel" aria-labelledby="heading-2">
            <div class="card-block">
                <p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
            </div>
        </div>
    </div>
    <div class="card card-white">
        <div class="card-header" role="tab" id="heading-3">
            <h5 class="mb-0">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
                    Closed item 2
                </a>
            </h5>
        </div>
        <div id="collapse-3" class="collapse" role="tabpanel" aria-labelledby="heading-3">
            <div class="card-block">
                <p>3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it.</p>
            </div>
        </div>
    </div>
</div>