In this tutorial, we will create accordion (FAQ's) in next js 13 with bootstrap 5. First you need to setup next js 13 with bootstrap 5 project.
how to use bootstrap 5 in next js 13
Next 13 with Bootstrap 5 Accordion Example
1. Create next js 13 with bootstrap 5 accordion (FAQ's) using bootstrap 5 class accordion, accordion-item, accordion-header, accordion-button, accordion-collapse etc.
export default function Home() {
return (
<div className="container">
<div className="accordion" id="accordionExample">
<div className="accordion-item">
<h2 className="accordion-header" id="headingOne">
<button
className="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="true"
aria-controls="collapseOne"
>
Accordion Item #1
</button>
</h2>
<div
id="collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<strong>This is the first item's accordion body.</strong> It is
shown by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingTwo">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
Accordion Item #2
</button>
</h2>
<div
id="collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseThree"
aria-expanded="false"
aria-controls="collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="collapseThree"
className="accordion-collapse collapse"
aria-labelledby="headingThree"
data-bs-parent="#accordionExample"
>
<div className="accordion-body">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
);
}
next js 13 with bootstrap 5 accordion (FAQ's)
2. next js 13 with bootstrap 5 flush accordion (FAQ's) it .accordion-flush to remove the default background-color.
export default function Home() {
return (
<div className="container">
<div className="accordion accordion-flush" id="accordionFlushExample">
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingOne">
<button
className="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"
className="accordion-collapse collapse"
aria-labelledby="flush-headingOne"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> className. This is
the first item's accordion body.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingTwo">
<button
className="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"
className="accordion-collapse collapse"
aria-labelledby="flush-headingTwo"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> className. This is
the second item's accordion body. Let's imagine this being filled
with some actual content.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="flush-headingThree">
<button
className="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"
className="accordion-collapse collapse"
aria-labelledby="flush-headingThree"
data-bs-parent="#accordionFlushExample"
>
<div className="accordion-body">
Placeholder content for this accordion, which is intended to
demonstrate the <code>.accordion-flush</code> className. This is
the third item's accordion body. Nothing more exciting happening
here in terms of content, but just filling up the space to make it
look, at least at first glance, a bit more representative of how
this would look in a real-world application.
</div>
</div>
</div>
</div>
</div>
);
}
next js 13 with bootstrap 5 flush accordion
3. next js 13 with bootstrap 5 always open accordion (FAQ's).
export default function Home() {
return (
<div className="container">
<div className="accordion" id="accordionPanelsStayOpenExample">
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingOne">
<button
className="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>
<div
id="panelsStayOpen-collapseOne"
className="accordion-collapse collapse show"
aria-labelledby="panelsStayOpen-headingOne"
>
<div className="accordion-body">
<strong>This is the first item's accordion body.</strong> It is
shown by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingTwo">
<button
className="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>
<div
id="panelsStayOpen-collapseTwo"
className="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingTwo"
>
<div className="accordion-body">
<strong>This is the second item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
<div className="accordion-item">
<h2 className="accordion-header" id="panelsStayOpen-headingThree">
<button
className="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#panelsStayOpen-collapseThree"
aria-expanded="false"
aria-controls="panelsStayOpen-collapseThree"
>
Accordion Item #3
</button>
</h2>
<div
id="panelsStayOpen-collapseThree"
className="accordion-collapse collapse"
aria-labelledby="panelsStayOpen-headingThree"
>
<div className="accordion-body">
<strong>This is the third item's accordion body.</strong> It is
hidden by default, until the collapse plugin adds the appropriate
classNamees that we use to style each element. These classNamees
control the overall appearance, as well as the showing and hiding
via CSS transitions. You can modify any of this with custom CSS or
overriding our default variables. It's also worth noting that just
about any HTML can go within the <code>.accordion-body</code>,
though the transition does limit overflow.
</div>
</div>
</div>
</div>
</div>
);
}
next js 13 with bootstrap 5 always open accordion
