Bootstrap 5 Accordion HTML Example

Bootstrap 5 accordion HTML with up and down arrow icons. The accordions HTML example is created by using pure Bootstrap 5 without extra CSS or JavaScript.

HTML

<div class="accordion" id="faqlist">
    <div class="accordion-item my-3 shadow">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-1">What is Lorem Ipsum?</button>
        </h2>
        <div id="content-accordion-1" class="accordion-collapse collapse" data-bs-parent="#faqlist">
            <div class="accordion-body">
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
            </div>
        </div>
    </div>

    <div class="accordion-item my-3 shadow">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-2">Why do we use it?</button>
        </h2>
        <div id="content-accordion-2" class="accordion-collapse collapse" data-bs-parent="#faqlist">
            <div class="accordion-body">
                It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.
            </div>
        </div>
    </div>

    <div class="accordion-item my-3 shadow">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-3">Where does it come from?</button>
        </h2>
        <div id="content-accordion-3" class="accordion-collapse collapse" data-bs-parent="#faqlist">
            <div class="accordion-body">
                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
            </div>
        </div>
    </div>

    <div class="accordion-item my-3 shadow">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-4">Where does it come from?</button>
        </h2>
        <div id="content-accordion-4" class="accordion-collapse collapse" data-bs-parent="#faqlist">
            <div class="accordion-body">
                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
            </div>
        </div>
    </div>

    <div class="accordion-item my-3 shadow">
        <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#content-accordion-5">Where does it come from?</button>
        </h2>
        <div id="content-accordion-5" class="accordion-collapse collapse" data-bs-parent="#faqlist">
            <div class="accordion-body">
                Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
            </div>
        </div>
    </div>
</div>

CSS

.accordion-button:focus {
box-shadow: none;
}