How do I use Bootstrap accordions?

Asked on Jun 01, 2025

1 Answer

Bootstrap accordions allow you to toggle the visibility of content sections. They are useful for organizing information in a compact way.


        
          
            
              
            
            
              
                This is the first item's accordion body.
              
            
          
          
            
              
            
            
              
                This is the second item's accordion body.

Additional Comment:

Ensure you include Bootstrap's CSS and JavaScript in your project for the accordion to function.
The "accordion" class is used to create the accordion container.
Each accordion item consists of an "accordion-header" and "accordion-collapse" for the content.
Use "data-bs-toggle="collapse"" and "data-bs-target" to control the collapse behavior.
The "data-bs-parent" attribute ensures that only one item is open at a time.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions

How do I use Bootstrap accordions?

1 Answer

Accordion Item #1

Accordion Item #2