Accordion
範例 1
有外框 + 第一個內容顯示
外框
< div class="accordion-item">內容顯示
< button class="accordion-button" aria-expanded="true" >
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla repellendus commodi dicta, laudantium eius illum illo doloremque, exercitationem iste inventore minus aperiam qui nobis. Cumque libero eveniet recusandae explicabo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla repellendus commodi dicta, laudantium eius illum illo doloremque, exercitationem iste inventore minus aperiam qui nobis. Cumque libero eveniet recusandae explicabo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et nulla repellendus commodi dicta, laudantium eius illum illo doloremque, exercitationem iste inventore minus aperiam qui nobis. Cumque libero eveniet recusandae explicabo!
範例 2
無外框 + 無內容顯示
無外框
< div class="accordion accordion-flush">無內容顯示
< button class="accordion-button collapsed">Lorem, ipsum dolor sit amet consectetur adipisicing, elit. Harum possimus ratione porro nulla quibusdam commodi, quae saepe fuga corporis beatae quas consequuntur cum! Numquam amet ullam dolorum nemo adipisci non.
Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Veniam quos dignissimos quidem repellendus ex laudantium ab quo beatae alias sed tempora neque necessitatibus hic, reprehenderit possimus at. Quisquam, dolores, explicabo!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat delectus, debitis facilis ad veritatis culpa veniam, voluptas praesentium optio, quod, omnis magnam? Autem velit cupiditate, natus officia illum excepturi accusantium.
範例 3
點擊打開，不會自動縮合
將class="accordion-collapse"上的data-bs-parent=""屬性拿掉，項目在打開另一個項目時保持打開狀態。
< div class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
< div class="accordion-body">
...
< div>
< div>
Lorem ipsum dolor sit amet consectetur adipisicing, elit. Dolores, doloribus architecto, repellendus repudiandae est et aperiam delectus. Provident fugit corporis, ullam quam autem nihil tenetur saepe fuga, enim placeat architecto?
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Pariatur consectetur odio sapiente. Dolore fugiat asperiores, soluta at laudantium pariatur corrupti consequatur accusantium autem quo iusto commodi, repudiandae aspernatur nobis iure.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ut iure reprehenderit, sed facilis, ducimus incidunt soluta, molestiae amet voluptates officia, aut. Atque, natus laborum, tenetur esse explicabo dolorum sequi?