The new AHA accordion is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
<div class="navbar-expand-lg">
<button
class="navbar-toggler mb-3"
type="button"
data-toggle="collapse"
data-target="#categories"
aria-controls="categories"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="aha-icon-hamburger-round"></i>
</button>
<div class="aui-nav-accordion collapse navbar-collapse" id="categories">
<div class="card mb-0">
<div class="card-header" id="headingOne">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed" type="button"
data-toggle="collapse" data-target="#collapseAccOne" aria-expanded="true"
aria-controls="collapseAccOne">
2015 Guidelines
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check1" />
<label for="check1">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check2" />
<label for="check2">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingTwo">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccTwo"
aria-expanded="false" aria-controls="collapseAccTwo">
English Healthcare
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check3" />
<label for="check3">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check4" />
<label for="check4">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingThree">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccThree"
aria-expanded="false" aria-controls="collapseAccThree">
ACLS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccThree" class="collapse" aria-labelledby="headingThree"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check5" />
<label for="check5">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check6" />
<label for="check6">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingFour">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccFour"
aria-expanded="false" aria-controls="collapseAccFour">
BLS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccFour" class="collapse" aria-labelledby="headingFour"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingFive">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccFive"
aria-expanded="false" aria-controls="collapseAccFive">
First Aid, CPR and AED
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccFive" class="collapse" aria-labelledby="headingFive"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingSix">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccSix"
aria-expanded="false" aria-controls="collapseAccSix">
Handbook
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccSix" class="collapse" aria-labelledby="headingSix"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingSeven">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccSeven"
aria-expanded="false" aria-controls="collapseAccSeven">
Heartsaver
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccSeven" class="collapse" aria-labelledby="headingSeven"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingEight">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccEight"
aria-expanded="false" aria-controls="collapseAccEight">
PALS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccEight" class="collapse" aria-labelledby="headingEight"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingnine">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccNine"
aria-expanded="false" aria-controls="collapseAccNine">
Pediatric
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccNine" class="collapse" aria-labelledby="headingnine"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
</div>
</div>The new AHA accordion is fully responsive with modern looks and feel with accessibility features. The layout is using Bootstrap 4.5 with flex box.
<div class="navbar-expand-lg">
<button
class="navbar-toggler mb-3"
type="button"
data-toggle="collapse"
data-target="#categories"
aria-controls="categories"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="aha-icon-hamburger-round"></i>
</button>
<div class="aui-nav-accordion collapse navbar-collapse" id="categories">
<div class="card mb-0">
<div class="card-header" id="headingOne">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed" type="button"
data-toggle="collapse" data-target="#collapseAccOne" aria-expanded="true"
aria-controls="collapseAccOne">
2015 Guidelines
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check1" />
<label for="check1">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check2" />
<label for="check2">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingTwo">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccTwo"
aria-expanded="false" aria-controls="collapseAccTwo">
English Healthcare
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccTwo" class="collapse" aria-labelledby="headingTwo"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check3" />
<label for="check3">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check4" />
<label for="check4">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingThree">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccThree"
aria-expanded="false" aria-controls="collapseAccThree">
ACLS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccThree" class="collapse" aria-labelledby="headingThree"
data-parent="#categories">
<div class="card-body pt-2 pb-0">
<div class="form-group form-check">
<input type="checkbox" value="" id="check5" />
<label for="check5">
English Healthcare
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check6" />
<label for="check6">
English Healthcare
</label>
</div>
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingFour">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccFour"
aria-expanded="false" aria-controls="collapseAccFour">
BLS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccFour" class="collapse" aria-labelledby="headingFour"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingFive">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccFive"
aria-expanded="false" aria-controls="collapseAccFive">
First Aid, CPR and AED
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccFive" class="collapse" aria-labelledby="headingFive"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingSix">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccSix"
aria-expanded="false" aria-controls="collapseAccSix">
Handbook
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccSix" class="collapse" aria-labelledby="headingSix"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingSeven">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccSeven"
aria-expanded="false" aria-controls="collapseAccSeven">
Heartsaver
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccSeven" class="collapse" aria-labelledby="headingSeven"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingEight">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccEight"
aria-expanded="false" aria-controls="collapseAccEight">
PALS
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccEight" class="collapse" aria-labelledby="headingEight"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
<div class="card mb-0">
<div class="card-header" id="headingnine">
<h3 class="mb-0 h7">
<button class="btn btn-text aui-accordion-btn collapsed"
type="button" data-toggle="collapse" data-target="#collapseAccNine"
aria-expanded="false" aria-controls="collapseAccNine">
Pediatric
<i class="acc-btn-arrow aha-icon-arrow-down"></i>
</button>
</h3>
</div>
<div id="collapseAccNine" class="collapse" aria-labelledby="headingnine"
data-parent="#categories">
<div class="card-body pt-2 pb-3">
English Healthcare
</div>
</div>
</div>
</div>
</div>