An accordion hides or reveals additional content when clicked on.
Content goes in here!
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>