Accordion is a series of panels stacked on the top of each other.
Accordion menus and widgets are widely used in the web applications to manage the large amount of content and navigation lists in a small amount area.
With Bootstrap collapse plugin you can either create accordions or show and hide content without writing any JavaScript code.
The accordion uses collapse internally to make it collapsible. To render an accordion that’s expanded, add the .open class on the .accordion.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="accordion"id="accordionExample"><divclass="accordion-item"><h2class="accordion-header"id="headingOne"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseOne"aria-expanded="false"aria-controls="collapseOne">
Accordion Item #1
</button></h2><divid="collapseOne"class="accordion-collapse collapse"aria-labelledby="headingOne"data-bs-parent="#accordionExample"style=""><divclass="accordion-body"><strong>HTML - Hyper Text Markup Language.</strong> HTML is a typical markup language used for building a web pages.<code>The word "Markup" means a language with particular syntax which</code>.
</div></div></div><divclass="accordion-item"><h2class="accordion-header"id="headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#collapseTwo"aria-expanded="false"aria-controls="collapseTwo">
Accordion Item #2
</button></h2><divid="collapseTwo"class="accordion-collapse collapse"aria-labelledby="headingTwo"data-bs-parent="#accordionExample"style=""><divclass="accordion-body"><strong>CSS stands for Cascading Style Sheets. CSS defines how HTML.</strong>elements are to be displayed on screen or in other media. CSS stores a<code>considerable measure of work.</code>.
</div></div></div></div></body></html>
Output
Bootstrap Flush
Add .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example bg-light"><divclass="accordion accordion-flush"id="accordionFlushExample"><divclass="accordion-item"><h2class="accordion-header"id="flush-headingOne"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseOne"aria-expanded="false"aria-controls="flush-collapseOne">
Accordion Item #1
</button></h2><divid="flush-collapseOne"class="accordion-collapse collapse"aria-labelledby="flush-headingOne"data-bs-parent="#accordionFlushExample"style=""><divclass="accordion-body">A web page is a file document generally written in <code>Hyper Text Markup Language </code>which was accessed through the Internet by using web browsers.</div></div></div><divclass="accordion-item"><h2class="accordion-header"id="flush-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#flush-collapseTwo"aria-expanded="false"aria-controls="flush-collapseTwo">
Accordion Item #2
</button></h2><divid="flush-collapseTwo"class="accordion-collapse collapse"aria-labelledby="flush-headingTwo"data-bs-parent="#accordionFlushExample"style=""><divclass="accordion-body">External style sheets are stored in CSS files. <code> is utilized to control the style </code> of a web report in a straightforward and simple way..</div></div></div></div></body></html>
Output
Bootstrap Always Open
Omit the data-bs-parent attribute on each .accordion-collapse to make accordion items stay open when another item is opened.
Sample Code
<!doctype html><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"rel="stylesheet"><linkhref="https://getbootstrap.com/docs/5.2/assets/css/docs.css"rel="stylesheet"><title>Bootstrap Example</title><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></head><bodyclass="p-3 m-0 border-0 bd-example"><divclass="accordion"id="accordionPanelsStayOpenExample"><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingOne"><buttonclass="accordion-button"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseOne"aria-expanded="true"aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button></h2><divid="panelsStayOpen-collapseOne"class="accordion-collapse collapse show"aria-labelledby="panelsStayOpen-headingOne"><divclass="accordion-body"><strong>The word "Markup" means</strong> a language with particular <code>syntax which instructs a Web browser to how the page needs to display.<code></code></div></div></div><divclass="accordion-item"><h2class="accordion-header"id="panelsStayOpen-headingTwo"><buttonclass="accordion-button collapsed"type="button"data-bs-toggle="collapse"data-bs-target="#panelsStayOpen-collapseTwo"aria-expanded="false"aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button></h2><divid="panelsStayOpen-collapseTwo"class="accordion-collapse collapse"aria-labelledby="panelsStayOpen-headingTwo"><divclass="accordion-body"><strong>HTML uses a pre-defined</strong> set of elements called tags.<code> A group of elements which is join together to build the web page.</code></div></div></div></div></body></html>
