Bootstrap 5 Accordion

HTML CSS JS Tidy

<h1 class="text-primary text-center"> 
		Bootstrap 5 Accordion 
	</h1>

<h2 class="text-center"> 
		FAQ Frequently Ask Question Answer
	</h2> 
	<div class="container mt-5"> 
		<div class="accordion" id="ao-accordion"> 
			<div class="accordion-item"> 
				<h2 class="accordion-header"
					id="panelsStayOpen-headingOne"> 
					<button class="accordion-button"
						type="button" data-bs-toggle="collapse"
						data-bs-target="#panelsStayOpen-collapseOne"
						aria-expanded="true"
						aria-controls="panelsStayOpen-collapseOne"> 
						What is HTML? 
					</button> 
				</h2>

<div id="panelsStayOpen-collapseOne"
					class="accordion-collapse collapse show"
					aria-labelledby="panelsStayOpen-headingOne"> 
					<div class="accordion-body"> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
					</div> 
				</div> 
			</div> 
			<div class="accordion-item"> 
				<h2 class="accordion-header"
					id="panelsStayOpen-headingTwo"> 
					<button class="accordion-button collapsed"
						type="button" data-bs-toggle="collapse"
						data-bs-target="#panelsStayOpen-collapseTwo"
						aria-expanded="false"
						aria-controls="panelsStayOpen-collapseTwo"> 
						What is CSS? 
					</button> 
				</h2>

<div id="panelsStayOpen-collapseTwo"
					class="accordion-collapse collapse"
					aria-labelledby="panelsStayOpen-headingTwo"> 
					<div class="accordion-body"> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
					</div> 
				</div> 
			</div> 
		  <div class="accordion-item"> 
				<h2 class="accordion-header"
					id="panelsStayOpen-headingThree"> 
					<button class="accordion-button collapsed"
						type="button" data-bs-toggle="collapse"
						data-bs-target="#panelsStayOpen-collapseThree"
						aria-expanded="false"
						aria-controls="panelsStayOpen-collapseThree"> 
						What is Javascript? 
					</button> 
				</h2>

<div id="panelsStayOpen-collapseThree"
					class="accordion-collapse collapse"
					aria-labelledby="panelsStayOpen-headingThree"> 
					<div class="accordion-body"> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
					</div> 
				</div> 
			</div> 
		  <div class="accordion-item"> 
				<h2 class="accordion-header"
					id="panelsStayOpen-headingFour"> 
					<button class="accordion-button collapsed"
						type="button" data-bs-toggle="collapse"
						data-bs-target="#panelsStayOpen-collapseFour"
						aria-expanded="false"
						aria-controls="panelsStayOpen-collapseFour"> 
						How to become a web developer? 
					</button> 
				</h2>

<div id="panelsStayOpen-collapseFour"
					class="accordion-collapse collapse"
					aria-labelledby="panelsStayOpen-headingFour"> 
					<div class="accordion-body"> 
						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
					</div> 
				</div> 
			</div> 
		</div> 
	</div>

HTML CSS JS Tidy

Bootstrap 5 Accordion

>_Console

Leave a Comment Cancel reply

>_Console

File Setting

Code Playground Setting

Add External Stylesheets and Script

Leave a Comment Cancel reply