Lifetime deal · ends October 5 Pay once. Build forever. $199 $349 Save $150
00days
00hrs
00min
00sec
Claim lifetime deal for $199

Bootstrap class: .accordion-item

    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseOne" aria-expanded="false" aria-controls="accordionCollapseOne">
                Lorem ipsum dolor sit amet consectetur.
                </button>
            </h2>
            <div id="accordionCollapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                <div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quam dolore ea pariatur veniam rem voluptatibus harum magni reiciendis maiores!</div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseTwo" aria-expanded="false" aria-controls="accordionCollapseTwo">
                Lorem ipsum dolor, sit amet consectetur adipisicing.
                </button>
            </h2>
            <div id="accordionCollapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea nam exercitationem alias ad, repellendus eligendi ipsa rerum voluptatum aperiam.</div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordionCollapseTwo" aria-expanded="false" aria-controls="accordionCollapseTwo">
                Lorem ipsum dolor, sit amet consectetur adipisicing.
                </button>
            </h2>
            <div id="accordionCollapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea nam exercitationem alias ad, repellendus eligendi ipsa rerum voluptatum aperiam.</div>
            </div>
        </div>
    </div>

Preview

Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo quam dolore ea pariatur veniam rem voluptatibus harum magni reiciendis maiores!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea nam exercitationem alias ad, repellendus eligendi ipsa rerum voluptatum aperiam.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim ea nam exercitationem alias ad, repellendus eligendi ipsa rerum voluptatum aperiam.

Check .accordion-item in a real project

Click one of the examples listed below to open the Shuffle Visual Editor with the UI library that uses the selected component.

Tips 💡

More in Bootstrap Accordion