Accordion
Accordion.
Make use of Bootstrap's unique Accordion styles to enhance actions in forms, dialogs, and various other elements, featuring comprehensive support for multiple sizes, states, and additional functionalities.
Accordion on BootstrapBasic Accordion
Basic accordion. Add accordion class in root
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="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" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Accordion Item #3
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Always Open Accordion
Omit data-bs-parent attribute on each
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="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" class="accordion-collapse collapse show">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Default Accordion
Default accordion. Add accordion class in root
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-primary" id="accordion-one">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#default-collapseOne" aria-expanded="true" aria-controls="default-collapseOne">
Accordion Header One
</button>
</h2>
<div id="default-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-one">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#default-collapseTwo" aria-expanded="false" aria-controls="default-collapseTwo">
Accordion Header Two
</button>
</h2>
<div id="default-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#default-collapseThree" aria-expanded="false" aria-controls="#default-collapseThree">
Accordion Header Three
</button>
</h2>
<div id="default-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-one">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>Accordion bordered
Accordion with border. Add class accordion-bordered with the class accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-danger-solid" id="accordion-two">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bordered_collapseOne">
Accordion Header One
</button>
</h2>
<div id="bordered_collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-two">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#bordered_collapseTwo">
Accordion Header Two
</button>
</h2>
<div id="bordered_collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-two">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#bordered_collapseThree">
Accordion Header Three
</button>
</h2>
<div id="bordered_collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-two">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion without space
Add accordion-no-gutter class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-no-gutter accordion-header-bg" id="accordion-three">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#no-gutter-collapseOne">
Accordion Header One
</button>
</h2>
<div id="no-gutter-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-three">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#no-gutter-collapseTwo">
Accordion Header Two
</button>
</h2>
<div id="no-gutter-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-three">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#no-gutter-collapseThree">
Accordion Header Three
</button>
</h2>
<div id="no-gutter-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-three">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion without space with border
Add accordion-no-gutter accordion-bordered class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-no-gutter accordion-bordered" id="accordion-four">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#bordered-no-gutter-collapseOne">
Accordion Header One
</button>
</h2>
<div id="bordered-no-gutter-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-four">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#bordered-no-gutter-collapseTwo">
Accordion Header Two
</button>
</h2>
<div id="bordered-no-gutter-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-four">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#bordered-no-gutter-collapseThree">
Accordion Header Three
</button>
</h2>
<div id="bordered-no-gutter-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-four">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion indicator in right position
Add accordion-start-indicator class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-left-indicator" id="accordion-five">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#left-indicator-collapseOne">
<span class="accordion-header-indicator"></span>
<span class="accordion-header-text">Accordion Header One</span<
</button>
</h2<
<div id="left-indicator-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-five"<
<div class="accordion-body"<
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#left-indicator-collapseTwo"<
Accordion Header Two
</button<
</h2<
<div id="left-indicator-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-five"<
<div class="accordion-body"<
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#left-indicator-collapseThree"<
Accordion Header Three
</button<
</h2<
<div id="left-indicator-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-five"<
<div class="accordion-body"<
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div<
</div<
</div<
</div<
Accordion with icon
Add accordion-with-icon class with accordion
<div class="accordion accordion-with-icon" id="accordion-six">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#with-icon-collapseOne">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="with-icon-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-six">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#with-icon-collapseTwo">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="with-icon-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-six">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</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="#with-icon-collapseThree">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="with-icon-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-six">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>Accordion header background
Add accordion-header-bg class with accrodion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-header-bg accordion-bordered" id="accordion-seven">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-bg-collapseOne">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="header-bg-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-seven">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-info">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-bg-collapseTwo">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="header-bg-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-seven">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-bg-collapseThree">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="header-bg-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-seven">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>Accordion solid background
Add class accordion-solid-bg with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-solid-bg" id="accordion-eight">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solid-bg-collapseOne">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="solid-bg-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-eight">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solid-bg-collapseTwo">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header two</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="solid-bg-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-eight">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solid-bg-collapseThree">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="solid-bg-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-eight">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>Accordion active background
Add class accordion-active-header with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-active-header" id="accordion-nine">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#active-header-collapseOne">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header One</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="active-header-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-nine">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#active-header-collapseTwo">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Two</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="active-header-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-nine">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#active-header-collapseThree">
<span class="accordion-header-icon"></span>
<span class="accordion-header-text">Accordion Header Three</span>
<span class="accordion-header-indicator indicator-bordered"></span>
</button>
</h2>
<div id="active-header-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-nine">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion header shadow
Add accordion-header-shadow and accordion-rounded class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-header-shadow accordion-rounded" id="accordion-ten">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-shadow-collapseOne">
<span class="accordion-header-text">Accordion Header One</span>
</button>
</h2>
<div id="header-shadow-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-ten">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-shadow-collapseTwo">
<span class="accordion-header-text">Accordion Header Two</span>
</button>
</h2>
<div id="header-shadow-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-ten">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#header-shadow-collapseThree">
<span class="accordion-header-text">Accordion Header Three</span>
</button>
</h2>
<div id="header-shadow-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-ten">
<div class="accordion-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion rounded stylish
Add accordion-rounded-stylish class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-rounded-stylish accordion-bordered" id="accordion-eleven">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rounded-stylish-collapseOne">
<span class="accordion-header-text">Accordion Header One</span>
</button>
</h2>
<div id="rounded-stylish-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-eleven">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rounded-stylish-collapseTwo">
<span class="accordion-header-text">Accordion Header Two</span>
</button>
</h2>
<div id="rounded-stylish-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-eleven">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#rounded-stylish-collapseThree">
<span class="accordion-header-text">Accordion Header Three</span>
</button>
</h2>
<div id="rounded-stylish-collapseThree" class="accordion-collapse collapse show" data-bs-parent="#accordion-eleven">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>
Accordion gradient
Add accordion-gradient class with accordion
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
<div class="accordion accordion-rounded-stylish accordion-gradient" id="accordion-twelve">
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#gradient-collapseOne">
<span class="accordion-header-text">Accordion Header One</span>
</button>
</h2>
<div id="gradient-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordion-twelve">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#gradient-collapseTwo">
<span class="accordion-header-text">Accordion Header Two</span>
</button>
</h2>
<div id="gradient-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordion-twelve">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header accordion-header-primary">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#gradient-collapseThree">
<span class="accordion-header-text">Accordion Header Three</span>
</button>
</h2>
<div id="gradient-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordion-twelve">
<div class="accordion-body rounded-0">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
</div>
</div>
</div>
</div>