Accordion

An accordion hides or reveals additional content when clicked on.

Anim pariatur cliche reprehenderit...

Code

If more panels are needed, copy and paste the entire <div class="card">...</div> Make sure to give the new card(s) its unique ID in the highlighted areas below.

<p><button class="toggle-all">Expand All | Collapse All</button></p>
<div class="accordion mb-4">
        <div class="card">
                <div class="card-header m-0 p-0" id="headingOne">
                        <h3 aria-controls="collapseOne" aria-expanded="false" class="h4 m-0 p-3" data-target="#collapseOne" data-toggle="collapse" role="button">Collapsible Group Item #1</h3>
                </div>
                <div aria-labelledby="headingOne" class="collapse" id="collapseOne">
                        <div class="card-body">
                                <p>Anim pariatur cliche reprehenderit...</p>
                        </div>
                </div>
        </div>
        <div class="card">
                <div class="card-header m-0 p-0" id="headingTwo">
                        <h3 aria-controls="collapseTwo" aria-expanded="false" class="h4 m-0 p-3" data-target="#collapseTwo" data-toggle="collapse" role="button">Collapsible Group Item #2</h3>
                </div>
                <div aria-labelledby="headingTwo" class="collapse" id="collapseTwo">
                        <div class="card-body">
                                <p>Anim pariatur cliche reprehenderit...</p>
                        </div>
                </div>
        </div>
</div>