Vertical FAQ Accordion Block


This code snippet provides a user-friendly, space-saving vertical FAQ component using Bootstrap accordion dropdowns. The questions are presented in a condensed, easy-to-read format, and the answers are revealed when clicked. The design is simple and easy to use, with a clear font and appropriate spacing. It allows users to quickly find the information they need with just one click.

<section class="py-5">
	<div class="container">
		<div class="row justify-content-center text-center mb-3">
			<div class="col-lg-8 col-xl-7">
				<span class="text-muted">F.A.Q</span>
				<h2 class="display-5 fw-bold">Frequently Asked Questions</h2>
				<p class="lead">Lorem ipsum dolor sit, amet consectetur adipisicing elit Consequatur quidem eius cum voluptatum quasi delectus.</p>
			</div>
		</div>
		<div class="row justify-content-center pt-lg-3">
			<div class="col-md-3">
				<h2 class="mt-3 fw-bold">Technical</h2>
			</div>
			<div class="col-md-9">
				<div class="accordion" id="Technical-accordion">
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Technical-headingOne"><button aria-controls="Technical-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Technical-collapseOne" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Technical-headingOne" class="accordion-collapse collapse" data-bs-parent="#Technical-accordion" id="Technical-collapseOne">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Technical-headingTwo"><button aria-controls="Technical-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Technical-collapseTwo" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Technical-headingTwo" class="accordion-collapse collapse" data-bs-parent="#Technical-accordion" id="Technical-collapseTwo">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Technical-headingThree"><button aria-controls="Technical-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Technical-collapseThree" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Technical-headingThree" class="accordion-collapse collapse" data-bs-parent="#Technical-accordion" id="Technical-collapseThree">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Technical-headingFour"><button aria-controls="Technical-collapseFour" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Technical-collapseFour" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Technical-headingFour" class="accordion-collapse collapse" data-bs-parent="#Technical-accordion" id="Technical-collapseFour">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row justify-content-center mt-5">
			<div class="col-md-3">
				<h2 class="mt-3 fw-bold">Billing</h2>
			</div>
			<div class="col-md-9">
				<div class="accordion" id="Billing-accordion">
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Billing-headingOne"><button aria-controls="Billing-collapseOne" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Billing-collapseOne" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Billing-headingOne" class="accordion-collapse collapse" data-bs-parent="#Billing-accordion" id="Billing-collapseOne">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Billing-headingTwo"><button aria-controls="Billing-collapseTwo" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Billing-collapseTwo" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Billing-headingTwo" class="accordion-collapse collapse" data-bs-parent="#Billing-accordion" id="Billing-collapseTwo">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Billing-headingThree"><button aria-controls="Billing-collapseThree" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Billing-collapseThree" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Billing-headingThree" class="accordion-collapse collapse" data-bs-parent="#Billing-accordion" id="Billing-collapseThree">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
					<div class="accordion-item border-0 mb-3">
						<h2 class="accordion-header" id="Billing-headingFour"><button aria-controls="Billing-collapseFour" aria-expanded="false" class="accordion-button collapsed" data-bs-target="#Billing-collapseFour" data-bs-toggle="collapse" type="button">
						<div class="text-muted me-3">
							<svg class="bi bi-question-circle-fill" fill="currentColor" height="24" viewbox="0 0 16 16" width="24" xmlns="http://www.w3.org/2000/svg">
							<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247zm2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z"></path></svg>
						</div>Lorem ipsum dolor sit amet adipisicing ?</button></h2>
						<div aria-labelledby="Billing-headingFour" class="accordion-collapse collapse" data-bs-parent="#Billing-accordion" id="Billing-collapseFour">
							<div class="accordion-body">
								Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maxime quos voluptatum at, quibusdam blanditiis saepe soluta laborum, repellendus nemo id porro dolor eveniet perspiciatis veritatis doloremque aliquam nam! Libero, nostrum!
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
To top