Accordion

Default Accordion

Add .show to .accordion-collapse element to render an accordion as expanded by default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur reprehenderit ratione aliquam tempora ad dicta excepturi id, cum officiis animi at exercitationem, accusantium delectus maxime, sit optio impedit esse culpa.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Expedita corrupti, optio omnis beatae, aut quidem voluptates, sapiente esse id cum vitae eaque recusandae odit. A earum alias magni sed voluptatum.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Atque omnis dolores ipsa laudantium iure magni ad praesentium quisquam rem dignissimos veritatis, eligendi hic? At nisi, quis cumque perspiciatis voluptatem ratione?

HTML Code for this Element

<div class="accordion"
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="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>
			<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur voluptas repellendus quis odio repudiandae ipsa at aperiam dignissimos veritatis.</div>
			</div>
		</div>
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="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>
			<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et incidunt reiciendis voluptatum nemo earum blanditiis neque sunt animi odio dicta?</div>
			</div>
		</div>
		<div class="accordion-item">
			<h2 class="accordion-header">
			<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
				Accordion Item #3
			</button>
			</h2>
			<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
			<div class="accordion-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas inventore quibusdam, ratione rerum doloribus quam qui dolorum facere debitis!</div>
			</div>
		</div>
	</div>

Flush Accordion

Add .accordion-flush to remove some borders, and some rounded corners to render accordions edge-to-edge with their parent container.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur voluptas repellendus quis odio repudiandae ipsa at aperiam dignissimos veritatis.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et incidunt reiciendis voluptatum nemo earum blanditiis neque sunt animi odio dicta?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas inventore quibusdam, ratione rerum doloribus quam qui dolorum facere debitis!

HTML Code for this Element

<div class="accordion accordion-flush" id="accordionFlushExample">
	<div class="accordion-item">
		<h2 class="accordion-header">
		<button class="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>
		<div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
		<div class="accordion-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur voluptas repellendus quis odio repudiandae ipsa at aperiam dignissimos veritatis.</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
		<button class="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>
		<div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
		<div class="accordion-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et incidunt reiciendis voluptatum nemo earum blanditiis neque sunt animi odio dicta?</div>
		</div>
	</div>
	<div class="accordion-item">
		<h2 class="accordion-header">
		<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
			Accordion Item #3
		</button>
		</h2>
		<div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
		<div class="accordion-body">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed voluptas inventore quibusdam, ratione rerum doloribus quam qui dolorum facere debitis!</div>
		</div>
	</div>
	</div>