Accordion
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.
Accordion with Checkbox
English Healthcare
English Healthcare
English Healthcare
English Healthcare
English Healthcare
English Healthcare
HTML
<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.
Accordion with content
hai1
hai2
hai2
English Healthcare
HTML
<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>