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 left 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>