The accordion uses collapse internally to make it collapsible. To render an accordion that's expanded, add the .open
class on the .accordion
.
Click the accordions below to expand/collapse the accordion content.
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<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" aria-labelledby="headingOne" 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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<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" aria-labelledby="headingTwo" 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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<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" aria-labelledby="headingThree" 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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Add .accordion-flush
to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="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" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="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" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="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" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
</div>
Use .accordion-card
<div class="accordion accordion-card" id="accordionCardExample">
<div class="accordion-item">
<h2 class="accordion-header" id="card-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#card-collapseOne" aria-expanded="true" aria-controls="card-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="card-collapseOne" class="accordion-collapse collapse show" aria-labelledby="card-headingOne" data-bs-parent="#accordionCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="card-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#card-collapseTwo" aria-expanded="false" aria-controls="card-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="card-collapseTwo" class="accordion-collapse collapse" aria-labelledby="card-headingTwo" data-bs-parent="#accordionCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="card-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#card-collapseThree" aria-expanded="false" aria-controls="card-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="card-collapseThree" class="accordion-collapse collapse" aria-labelledby="card-headingThree" data-bs-parent="#accordionCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
</div>
Use .accordion-card
<div class="accordion accordion-card accordion-card-shadow" id="accordionCardShadowExample">
<div class="accordion-item">
<h2 class="accordion-header" id="cardshadow-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#cardshadow-collapseOne" aria-expanded="true" aria-controls="cardshadow-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="cardshadow-collapseOne" class="accordion-collapse collapse show" aria-labelledby="cardshadow-headingOne" data-bs-parent="#accordionCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardshadow-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardshadow-collapseTwo" aria-expanded="false" aria-controls="cardshadow-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="cardshadow-collapseTwo" class="accordion-collapse collapse" aria-labelledby="cardshadow-headingTwo" data-bs-parent="#accordionCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardshadow-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardshadow-collapseThree" aria-expanded="false" aria-controls="cardshadow-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="cardshadow-collapseThree" class="accordion-collapse collapse" aria-labelledby="cardshadow-headingThree" data-bs-parent="#accordionCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
</div>
Use .accordion-card-bold
<div class="accordion accordion-card accordion-card-bold" id="accordionCardBoldExample">
<div class="accordion-item">
<h2 class="accordion-header" id="cardbold-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#cardbold-collapseOne" aria-expanded="true" aria-controls="cardbold-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="cardbold-collapseOne" class="accordion-collapse collapse show" aria-labelledby="cardbold-headingOne" data-bs-parent="#accordionCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardbold-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardbold-collapseTwo" aria-expanded="false" aria-controls="cardbold-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="cardbold-collapseTwo" class="accordion-collapse collapse" aria-labelledby="cardbold-headingTwo" data-bs-parent="#accordionCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardbold-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardbold-collapseThree" aria-expanded="false" aria-controls="cardbold-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="cardbold-collapseThree" class="accordion-collapse collapse" aria-labelledby="cardbold-headingThree" data-bs-parent="#accordionCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
</div>
Use .accordion-card-bold
<div class="accordion accordion-card accordion-card-shadow accordion-card-bold" id="accordioncardboldshadowExample">
<div class="accordion-item">
<h2 class="accordion-header" id="cardboldshadow-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#cardboldshadow-collapseOne" aria-expanded="true" aria-controls="cardboldshadow-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="cardboldshadow-collapseOne" class="accordion-collapse collapse show" aria-labelledby="cardboldshadow-headingOne" data-bs-parent="#accordioncardboldshadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardboldshadow-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardboldshadow-collapseTwo" aria-expanded="false" aria-controls="cardboldshadow-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="cardboldshadow-collapseTwo" class="accordion-collapse collapse" aria-labelledby="cardboldshadow-headingTwo" data-bs-parent="#accordioncardboldshadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="cardboldshadow-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cardboldshadow-collapseThree" aria-expanded="false" aria-controls="cardboldshadow-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="cardboldshadow-collapseThree" class="accordion-collapse collapse" aria-labelledby="cardboldshadow-headingThree" data-bs-parent="#accordioncardboldshadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-soft" id="accordionSoftExample">
<div class="accordion-item">
<h2 class="accordion-header" id="soft-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#soft-collapseOne" aria-expanded="true" aria-controls="soft-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="soft-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="soft-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#soft-collapseTwo" aria-expanded="false" aria-controls="soft-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="soft-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="soft-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#soft-collapseThree" aria-expanded="false" aria-controls="soft-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="soft-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-card accordion-soft" id="accordionSoftCardExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcard-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcard-collapseOne" aria-expanded="true" aria-controls="softcard-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcard-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcard-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcard-collapseTwo" aria-expanded="false" aria-controls="softcard-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcard-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcard-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcard-collapseThree" aria-expanded="false" aria-controls="softcard-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcard-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-card .accordion-card-shadow .accordion-soft
<div class="accordion accordion-card accordion-card-shadow accordion-soft" id="accordionSoftCardShadowExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcardshadow-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcardshadow-collapseOne" aria-expanded="true" aria-controls="softcardshadow-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcardshadow-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcardshadow-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcardshadow-collapseTwo" aria-expanded="false" aria-controls="softcardshadow-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcardshadow-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcardshadow-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcardshadow-collapseThree" aria-expanded="false" aria-controls="softcardshadow-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcardshadow-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-card accordion-card-bold accordion-soft" id="accordionSoftCardBoldExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcardbold-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcardbold-collapseOne" aria-expanded="true" aria-controls="softcardbold-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcardbold-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcardbold-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcardbold-collapseTwo" aria-expanded="false" aria-controls="softcardbold-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcardbold-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcardbold-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcardbold-collapseThree" aria-expanded="false" aria-controls="softcardbold-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcardbold-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftCardBoldExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-soft accordion-soft-content" id="accordionSoftContentExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcontent-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcontent-collapseOne" aria-expanded="true" aria-controls="softcontent-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcontent-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftContentExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontent-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontent-collapseTwo" aria-expanded="false" aria-controls="softcontent-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcontent-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftContentExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontent-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontent-collapseThree" aria-expanded="false" aria-controls="softcontent-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcontent-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftContentExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-soft accordion-soft-content accordion-flush" id="accordionSoftContentFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentflush-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentflush-collapseOne" aria-expanded="true" aria-controls="softcontentflush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcontentflush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftContentFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentflush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentflush-collapseTwo" aria-expanded="false" aria-controls="softcontentflush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcontentflush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftContentFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentflush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentflush-collapseThree" aria-expanded="false" aria-controls="softcontentflush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcontentflush-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftContentFlushExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-soft accordion-soft-content accordion-card" id="accordionSoftContentCardExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcard-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcard-collapseOne" aria-expanded="true" aria-controls="softcontentcard-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcontentcard-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftContentCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcard-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcard-collapseTwo" aria-expanded="false" aria-controls="softcontentcard-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcontentcard-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftContentCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcard-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcard-collapseThree" aria-expanded="false" aria-controls="softcontentcard-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcontentcard-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftContentCardExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-soft
<div class="accordion accordion-soft accordion-soft-content accordion-card accordion-card-shadow" id="accordionSoftContentCardShadowExample">
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcardshadow-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcardshadow-collapseOne" aria-expanded="true" aria-controls="softcontentcardshadow-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="softcontentcardshadow-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSoftContentCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcardshadow-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcardshadow-collapseTwo" aria-expanded="false" aria-controls="softcontentcardshadow-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="softcontentcardshadow-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSoftContentCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="softcontentcardshadow-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#softcontentcardshadow-collapseThree" aria-expanded="false" aria-controls="softcontentcardshadow-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="softcontentcardshadow-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSoftContentCardShadowExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-simple
<div class="accordion accordion-simple" id="accordionSimpleExample">
<div class="accordion-item">
<h2 class="accordion-header" id="simple-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#simple-collapseOne" aria-expanded="true" aria-controls="simple-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="simple-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSimpleExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simple-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simple-collapseTwo" aria-expanded="false" aria-controls="simple-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="simple-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSimpleExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simple-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simple-collapseThree" aria-expanded="false" aria-controls="simple-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="simple-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSimpleExample">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-simple
<div class="accordion accordion-flush accordion-simple" id="accordionSimpleFlush">
<div class="accordion-item">
<h2 class="accordion-header" id="simpleflush-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#simpleflush-collapseOne" aria-expanded="true" aria-controls="simpleflush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="simpleflush-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSimpleFlush">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simpleflush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simpleflush-collapseTwo" aria-expanded="false" aria-controls="simpleflush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="simpleflush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSimpleFlush">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simpleflush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simpleflush-collapseThree" aria-expanded="false" aria-controls="simpleflush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="simpleflush-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSimpleFlush">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-simple
<div class="accordion accordion-card accordion-simple" id="accordionSimpleCard">
<div class="accordion-item">
<h2 class="accordion-header" id="simplecard-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#simplecard-collapseOne" aria-expanded="true" aria-controls="simplecard-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="simplecard-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSimpleCard">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecard-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecard-collapseTwo" aria-expanded="false" aria-controls="simplecard-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="simplecard-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSimpleCard">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecard-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecard-collapseThree" aria-expanded="false" aria-controls="simplecard-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="simplecard-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSimpleCard">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-simple
<div class="accordion accordion-card accordion-card-shadow accordion-simple" id="accordionSimpleCardShadow">
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadow-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadow-collapseOne" aria-expanded="true" aria-controls="simplecardshadow-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="simplecardshadow-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSimpleCardShadow">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadow-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadow-collapseTwo" aria-expanded="false" aria-controls="simplecardshadow-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="simplecardshadow-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSimpleCardShadow">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadow-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadow-collapseThree" aria-expanded="false" aria-controls="simplecardshadow-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="simplecardshadow-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSimpleCardShadow">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-simple
<div class="accordion accordion-card accordion-card-bold accordion-simple" id="accordionSimpleCardBold">
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadowbold-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadowbold-collapseOne" aria-expanded="true" aria-controls="simplecardshadowbold-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="simplecardshadowbold-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionSimpleCardBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadowbold-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadowbold-collapseTwo" aria-expanded="false" aria-controls="simplecardshadowbold-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="simplecardshadowbold-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionSimpleCardBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="simplecardshadowbold-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#simplecardshadowbold-collapseThree" aria-expanded="false" aria-controls="simplecardshadowbold-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="simplecardshadowbold-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionSimpleCardBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-icon
<div class="accordion accordion-icon" id="accordionIcon">
<div class="accordion-item">
<h2 class="accordion-header" id="icon-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#icon-collapseOne" aria-expanded="true" aria-controls="icon-collapseOne">
<div class="d-flex align-items-center"><i class="acon-icon ri-funds-box-line"></i> <span>Accordion Item #1</span></div>
</button>
</h2>
<div id="icon-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionIcon">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="icon-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#icon-collapseTwo" aria-expanded="false" aria-controls="icon-collapseTwo">
<div class="d-flex align-items-center"><i class="acon-icon ri-printer-cloud-line"></i> <span>Accordion Item #2</span></div>
</button>
</h2>
<div id="icon-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionIcon">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="icon-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#icon-collapseThree" aria-expanded="false" aria-controls="icon-collapseThree">
<div class="d-flex align-items-center"><i class="acon-icon ri-award-fill"></i> <span>Accordion Item #3</span></div>
</button>
</h2>
<div id="icon-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionIcon">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Use .accordion-icon
<div class="accordion accordion-card accordion-card-bold accordion-icon" id="accordionIconBold">
<div class="accordion-item">
<h2 class="accordion-header" id="iconcardbold-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#iconcardbold-collapseOne" aria-expanded="true" aria-controls="iconcardbold-collapseOne">
<div class="d-flex align-items-center"><i class="acon-icon ri-funds-box-line"></i> <span>Accordion Item #1</span></div>
</button>
</h2>
<div id="iconcardbold-collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionIconBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="iconcardbold-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#iconcardbold-collapseTwo" aria-expanded="false" aria-controls="iconcardbold-collapseTwo">
<div class="d-flex align-items-center"><i class="acon-icon ri-printer-cloud-line"></i> <span>Accordion Item #2</span></div>
</button>
</h2>
<div id="iconcardbold-collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionIconBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="iconcardbold-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#iconcardbold-collapseThree" aria-expanded="false" aria-controls="iconcardbold-collapseThree">
<div class="d-flex align-items-center"><i class="acon-icon ri-award-fill"></i> <span>Accordion Item #3</span></div>
</button>
</h2>
<div id="iconcardbold-collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionIconBold">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>
Omit the data-bs-parent
attribute on each .accordion-collapse
to make accordion items stay open when another item is opened.
<div class="accordion" id="accordionPanelsStayOpenExample">
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="panelsStayOpen-collapseOne" class="accordion-collapse collapse show" aria-labelledby="panelsStayOpen-headingOne">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingTwo">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="panelsStayOpen-collapseThree" class="accordion-collapse collapse" aria-labelledby="panelsStayOpen-headingThree">
<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. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer la.
</div>
</div>
</div>
</div>