Accordion

<div class="accordion" id="accordion-primary-color">
    <div class="card">
        <div class="card-header" id="accordion-primary-color-headingOne">
            <h2 class="mb-0">
                <button aria-controls="accordion-primary-color-collapseOne" aria-expanded="true" class="btn btn-link btn-block text-left" data-target="#accordion-primary-color-collapseOne" data-toggle="collapse" type="button">
                    Lorem Ipsum Dolor Sit Amet ? <i aria-hidden="true" class="fa">&nbsp;</i>
                </button>
            </h2>
        </div>
        <div aria-labelledby="accordion-primary-color-headingOne" class="collapse show" data-parent="#accordion-primary-color" id="accordion-primary-color-collapseOne">
            <div class="card-body">
                <p>
                    Cras sit amet maximus nisl, non placerat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nec molestie magna. Quisque erat nisi, suscipit et scelerisque quis,
                    sodales id turpis. Risus turpis euismod enim, non volutpat elit justo eget mi. Fusce lacinia eu magna sed ultricies.
                </p>
                <p>
                    Praesent aliquet euismod volutpat. Ut vel mi eleifend, fermentum mauris id, luctus turpis. Sed efficitur, nisl quis iaculis molestie, nisi turpis commodo risus, vel ornare lorem lectus vitae dui. Maecenas vel lacinia
                    justo. Vivamus varius diam eu dignissim dictum. Nullam non massa vitae nunc posuere consectetur. Nullam magna nibh, luctus vel purus et, pharetra ornare diam. Maecenas ac pellentesque dui, ut fringilla sapien.
                </p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="accordion-primary-color-headingTwo">
            <h2 class="mb-0">
                <button aria-controls="accordion-primary-color-collapseTwo" aria-expanded="false" class="btn btn-link btn-block text-left collapsed" data-target="#accordion-primary-color-collapseTwo" data-toggle="collapse" type="button">
                    Quisque pretium finibus ? <i aria-hidden="true" class="fa">&nbsp;</i>
                </button>
            </h2>
        </div>
        <div aria-labelledby="accordion-primary-color-headingTwo" class="collapse" data-parent="#accordion-primary-color" id="accordion-primary-color-collapseTwo">
            <div class="card-body">
                <p>
                    Cras sit amet maximus nisl, non placerat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nec molestie magna. Quisque erat nisi, suscipit et scelerisque quis,
                    sodales id turpis. Risus turpis euismod enim, non volutpat elit justo eget mi. Fusce lacinia eu magna sed ultricies.
                </p>
                <p>
                    Praesent aliquet euismod volutpat. Ut vel mi eleifend, fermentum mauris id, luctus turpis. Sed efficitur, nisl quis iaculis molestie, nisi turpis commodo risus, vel ornare lorem lectus vitae dui. Maecenas vel lacinia
                    justo. Vivamus varius diam eu dignissim dictum. Nullam non massa vitae nunc posuere consectetur. Nullam magna nibh, luctus vel purus et, pharetra ornare diam.
                </p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="accordion-primary-color-headingThree">
            <h2 class="mb-0">
                <button
                    aria-controls="accordion-primary-color-collapseThree"
                    aria-expanded="false"
                    class="btn btn-link btn-block text-left collapsed"
                    data-target="#accordion-primary-color-collapseThree"
                    data-toggle="collapse"
                    type="button"
                >
                    Arcu consequat pretium elementum ? <i aria-hidden="true" class="fa">&nbsp;</i>
                </button>
            </h2>
        </div>
        <div aria-labelledby="accordion-primary-color-headingThree" class="collapse" data-parent="#accordion-primary-color" id="accordion-primary-color-collapseThree">
            <div class="card-body">
                <p>
                    Cras sit amet maximus nisl, non placerat enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas nec molestie magna. Quisque erat nisi, suscipit et scelerisque quis,
                    sodales id turpis. Risus turpis euismod enim, non volutpat elit justo eget mi. Fusce lacinia eu magna sed ultricies.
                </p>
                <p>
                    Praesent aliquet euismod volutpat. Ut vel mi eleifend, fermentum mauris id, luctus turpis. Sed efficitur, nisl quis iaculis molestie, nisi turpis commodo risus, vel ornare lorem lectus vitae dui. Maecenas vel lacinia
                    justo. Vivamus varius diam eu dignissim dictum. Nullam non massa vitae nunc posuere consectetur. Nullam magna nibh, luctus vel purus et, pharetra ornare diam.
                </p>
            </div>
        </div>
    </div>
</div>