Accordion
Bootstrap accordion
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
The Bootstrap accordion is a component that organizes content within collapsable items. Accordion allows the display of only one collapsed item at a time.
Accordions can toggle through a number of text blocks with a single click, and that greatly enhances the UX of your project.
Examples of Bootstrap Accordion use include:
- A FAQ page
- Multiple item presentation
- Data tables
Note:
To preserve accordion's stylish behavior and avoid scrolling space mishaps, make sure the tabs are similar height.
Default Accordion
Default styling for the Bootstrap Accordion component
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
<div class="accordion" id="accordionExample">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
</div>
Material Accordion MDB Pro component
Material Design styling for the Bootstrap Accordion component
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea
proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingOne1">
<a data-toggle="collapse" data-parent="#accordionEx" href="#collapseOne1" aria-expanded="true"
aria-controls="collapseOne1">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseOne1" class="collapse show" role="tabpanel" aria-labelledby="headingOne1"
data-parent="#accordionEx">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseTwo2"
aria-expanded="false" aria-controls="collapseTwo2">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo2" class="collapse" role="tabpanel" aria-labelledby="headingTwo2"
data-parent="#accordionEx">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx" href="#collapseThree3"
aria-expanded="false" aria-controls="collapseThree3">
<h5 class="mb-0">
Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree3" class="collapse" role="tabpanel" aria-labelledby="headingThree3"
data-parent="#accordionEx">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!-- Accordion wrapper -->
Accordion close by default
You can have an accordion close by default if you don't want to show a text.
Default Accordion
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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
<div class="accordion" id="accordionExample275">
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingOne2">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne2"
aria-expanded="true" aria-controls="collapseOne2">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="collapseOne2" class="collapse" aria-labelledby="headingOne2"
data-parent="#accordionExample275">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingTwo2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
Collapsible Group Item #2
</button>
</h5>
</div>
<div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
data-parent="#accordionExample275">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
<div class="card z-depth-0 bordered">
<div class="card-header" id="headingThree2">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
Collapsible Group Item #3
</button>
</h5>
</div>
<div id="collapseThree2" class="collapse" aria-labelledby="headingThree2"
data-parent="#accordionExample275">
<div class="card-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 labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable.
</div>
</div>
</div>
</div>
Material Accordion MDB Pro component
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 labore wes anderson cred nesciunt sapiente ea proident. Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
<!--Accordion wrapper-->
<div class="accordion md-accordion" id="accordionEx1" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo1">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseTwo1"
aria-expanded="false" aria-controls="collapseTwo1">
<h5 class="mb-0">
Collapsible Group Item #1 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo1" class="collapse" role="tabpanel" aria-labelledby="headingTwo1"
data-parent="#accordionEx1">
<div class="card-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 labore wes anderson cred nesciunt sapiente ea proident.
Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingTwo2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseTwo21"
aria-expanded="false" aria-controls="collapseTwo21">
<h5 class="mb-0">
Collapsible Group Item #2 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseTwo21" class="collapse" role="tabpanel" aria-labelledby="headingTwo21"
data-parent="#accordionEx1">
<div class="card-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 labore wes anderson cred nesciunt sapiente ea proident.
Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingThree31">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx1" href="#collapseThree31"
aria-expanded="false" aria-controls="collapseThree31">
<h5 class="mb-0">
Collapsible Group Item #3 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseThree31" class="collapse" role="tabpanel" aria-labelledby="headingThree31"
data-parent="#accordionEx1">
<div class="card-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 labore wes anderson cred nesciunt sapiente ea proident.
Ad
vegan
excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth
nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!-- Accordion wrapper -->
Accordion with gradient background MDB Pro component
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
<!-- Grid row -->
<div class="row accordion-gradient-bcg d-flex justify-content-center">
<!-- Grid column -->
<div class="col-md-10 col-xl-6 py-5">
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-2" id="accordionEx7" role="tablist"
aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header rgba-stylish-strong z-depth-1 mb-1" role="tab" id="heading1">
<a data-toggle="collapse" data-parent="#accordionEx7" href="#collapse1" aria-expanded="true"
aria-controls="collapse1">
<h5 class="mb-0 white-text text-uppercase font-thin">
#1 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1"
data-parent="#accordionEx7">
<div class="card-body mb-1 rgba-grey-light white-text">
<p>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 labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header rgba-stylish-strong z-depth-1 mb-1" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx7" href="#collapse2"
aria-expanded="false" aria-controls="collapse2">
<h5 class="mb-0 white-text text-uppercase font-thin">
#2 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2"
data-parent="#accordionEx7">
<div class="card-body mb-1 rgba-grey-light white-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header rgba-stylish-strong z-depth-1 mb-1" role="tab" id="heading3">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx7" href="#collapse3"
aria-expanded="false" aria-controls="collapse3">
<h5 class="mb-0 white-text text-uppercase font-thin">
#3 <i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="heading3"
data-parent="#accordionEx7">
<div class="card-body mb-1 rgba-grey-light white-text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
Accordion with a picture MDB Pro component
Hi! I am the first one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hi! I am the second one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Hi! I am the third one.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-1" id="accordionEx23" role="tablist">
<div class="card">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading96">
<h5 class="text-uppercase mb-0 py-1">
<a class="white-text font-weight-bold" data-toggle="collapse" href="#collapse96" aria-expanded="true"
aria-controls="collapse96">
I am the first title of accordion
</a>
</h5>
</div>
<div id="collapse96" class="collapse show" role="tabpanel" aria-labelledby="heading96"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-4">
<div class="col-md-8">
<h2 class="font-weight-bold mb-3 black-text">Hi! I am the first one.</h2>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris</p>
<p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
</div>
<div class="col-md-4 mt-3 pt-2">
<div class="view z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading97">
<h5 class="text-uppercase mb-0 py-1">
<a class="collapsed font-weight-bold white-text" data-toggle="collapse" href="#collapse97"
aria-expanded="false" aria-controls="collapse97">
I am the second title of accordion
</a>
</h5>
</div>
<div id="collapse97" class="collapse" role="tabpanel" aria-labelledby="heading97"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-4">
<div class="col-md-8">
<h2 class="font-weight-bold mb-3 black-text">Hi! I am the second one.</h2>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris</p>
<p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
</div>
<div class="col-md-4 mt-3 pt-2">
<div class="view z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header blue lighten-3 z-depth-1" role="tab" id="heading98">
<h5 class="text-uppercase mb-0 py-1">
<a class="collapsed font-weight-bold white-text" data-toggle="collapse" href="#collapse98"
aria-expanded="false" aria-controls="collapse98">
I am the third title of accordion
</a>
</h5>
</div>
<div id="collapse98" class="collapse" role="tabpanel" aria-labelledby="heading98"
data-parent="#accordionEx23">
<div class="card-body">
<div class="row my-4">
<div class="col-md-8">
<h2 class="font-weight-bold mb-3 black-text">Hi! I am the third one.</h2>
<p class="">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris</p>
<p class="mb-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur.</p>
</div>
<div class="col-md-4 mt-3 pt-2">
<div class="view z-depth-1">
<img src="https://mdbootstrap.com/img/Photos/Others/nature.webp" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Accordion wrapper-->
Accordion with icons MDB Pro component
Hello, my friends, I am the nicest accordion!
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-3 z-depth-1-half" id="accordionEx194" role="tablist"
aria-multiselectable="true">
<ul class="list-unstyled d-flex justify-content-center pt-5 red-text">
<li><i class="fas fa-anchor mr-3 fa-2x" aria-hidden="true"></i></li>
<li><i class="far fa-life-ring mr-3 fa-2x" aria-hidden="true"></i></li>
<li><i class="far fa-star fa-2x" aria-hidden="true"></i></li>
</ul>
<h2 class="text-center text-uppercase red-text py-4 px-3">Hello my friends, I am the nicest accordion!</h2>
<hr class="mb-0">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading4">
<a data-toggle="collapse" data-parent="#accordionEx194" href="#collapse4" aria-expanded="true"
aria-controls="collapse4">
<h3 class="mb-0 mt-3 red-text">
How awesome accordion I am? <i class="fas fa-angle-down rotate-icon fa-2x"></i>
</h3>
</a>
</div>
<!-- Card body -->
<div id="collapse4" class="collapse show" role="tabpanel" aria-labelledby="heading4"
data-parent="#accordionEx194">
<div class="card-body pt-0">
<p>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 labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading5">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx194" href="#collapse5"
aria-expanded="false" aria-controls="collapse5">
<h3 class="mb-0 mt-3 red-text">
You're the greatest accordion! <i class="fas fa-angle-down rotate-icon fa-2x"></i>
</h3>
</a>
</div>
<!-- Card body -->
<div id="collapse5" class="collapse" role="tabpanel" aria-labelledby="heading5"
data-parent="#accordionEx194">
<div class="card-body pt-0">
<p>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 labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading6">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx194" href="#collapse6"
aria-expanded="false" aria-controls="collapse6">
<h3 class="mb-0 mt-3 red-text">
Thank you my dear! <i class="fas fa-angle-down rotate-icon fa-2x"></i>
</h3>
</a>
</div>
<!-- Card body -->
<div id="collapse6" class="collapse" role="tabpanel" aria-labelledby="heading6"
data-parent="#accordionEx194">
<div class="card-body pt-0">
<p>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 labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore sustainable VHS.</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
Accordion with teal cards MDB Pro component
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
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 labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore.
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-4" id="accordionEx2" role="tablist" aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header z-depth-1 teal lighten-4" role="tab" id="heading10">
<a data-toggle="collapse" data-parent="#accordionEx2" href="#collapse10" aria-expanded="true"
aria-controls="collapse10">
<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
First title
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse10" class="collapse show" role="tabpanel" aria-labelledby="heading10"
data-parent="#accordionEx2">
<div class="card-body rgba-teal-strong white-text">
<p>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.</p>
<p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header z-depth-1 teal lighten-3" role="tab" id="heading11">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx2" href="#collapse11"
aria-expanded="false" aria-controls="collapse11">
<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
Second title
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse11" class="collapse" role="tabpanel" aria-labelledby="heading11"
data-parent="#accordionEx2">
<div class="card-body rgba-teal-strong white-text">
<p>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.</p>
<p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header z-depth-1 teal lighten-2" role="tab" id="heading12">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx2" href="#collapse12"
aria-expanded="false" aria-controls="collapse12">
<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
Third title
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse12" class="collapse" role="tabpanel" aria-labelledby="heading12"
data-parent="#accordionEx2">
<div class="card-body rgba-teal-strong white-text">
<p>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.</p>
<p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header z-depth-1 teal lighten-1" role="tab" id="heading13">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx2" href="#collapse13"
aria-expanded="true" aria-controls="collapse13">
<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
Fourth title
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse13" class="collapse" role="tabpanel" aria-labelledby="heading13"
data-parent="#accordionEx2">
<div class="card-body rgba-teal-strong white-text">
<p>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.</p>
<p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header z-depth-1 teal" role="tab" id="heading14">
<a class="collapsed" data-toggle="collapse" data-parent="#accordionEx2" href="#collapse14"
aria-expanded="false" aria-controls="collapse14">
<h4 class="mb-0 black-text text-center font-weight-bold text-uppercase">
Fifth title
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse14" class="collapse" role="tabpanel" aria-labelledby="heading14"
data-parent="#accordionEx2">
<div class="card-body rgba-teal-strong white-text">
<p>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.</p>
<p>Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them
accusamus labore.</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
Accordion with a photo in the background MDB Pro component
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.
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.
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.
<!-- Card -->
<div class="card card-image"
style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
<!-- Content -->
<div class="rgba-black-strong py-5 px-4">
<div class="row d-flex justify-content-center">
<div class="col-md-10 col-xl-8">
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-5" id="accordionEx5" role="tablist"
aria-multiselectable="true">
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading30">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse30" aria-expanded="true"
aria-controls="collapse30">
<i class="fas fa-cloud fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="text-uppercase white-text mb-0 py-3 mt-1">
Item #1
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse30" class="collapse show" role="tabpanel" aria-labelledby="heading30"
data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">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.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading31">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse31" aria-expanded="true"
aria-controls="collapse31">
<i class="fas fa-comment-alt fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="text-uppercase white-text mb-0 py-3 mt-1">
Item #2
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse31" class="collapse" role="tabpanel" aria-labelledby="heading31"
data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">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.</p>
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card mb-4">
<!-- Card header -->
<div class="card-header p-0 z-depth-1" role="tab" id="heading32">
<a data-toggle="collapse" data-parent="#accordionEx5" href="#collapse32" aria-expanded="true"
aria-controls="collapse32">
<i class="fas fa-cogs fa-2x p-3 mr-4 float-left black-text" aria-hidden="true"></i>
<h4 class="text-uppercase white-text mb-0 py-3 mt-1">
Item #3
</h4>
</a>
</div>
<!-- Card body -->
<div id="collapse32" class="collapse" role="tabpanel" aria-labelledby="heading32"
data-parent="#accordionEx5">
<div class="card-body rgba-black-light white-text z-depth-1">
<p class="p-md-4 mb-0">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.</p>
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->
</div>
</div>
</div>
<!-- Content -->
</div>
<!-- Card -->
Accordion with a table MDB Pro component
| Name | Condition | Last edited | ||
|---|---|---|---|---|
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 | ||
| Product Hunt Visitor | Scroll % is equal or greater than 80 | 13.06.2017 | ||
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 |
| Name | Condition | Last edited | ||
|---|---|---|---|---|
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 | ||
| Product Hunt Visitor | Scroll % is equal or greater than 80 | 13.06.2017 | ||
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 |
| Name | Condition | Last edited | ||
|---|---|---|---|---|
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 | ||
| Product Hunt Visitor | Scroll % is equal or greater than 80 | 13.06.2017 | ||
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 |
| Name | Condition | Last edited | ||
|---|---|---|---|---|
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 | ||
| Product Hunt Visitor | Scroll % is equal or greater than 80 | 13.06.2017 | ||
| Test subscription | Scroll % is equal or greater than 80 | 12.06.2017 |
<!--Accordion wrapper-->
<div class="accordion md-accordion accordion-blocks" id="accordionEx78" role="tablist"
aria-multiselectable="true">
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="headingUnfiled">
<!--Options-->
<div class="dropdown float-left">
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt"></i>
</button>
<div class="dropdown-menu dropdown-info">
<a class="dropdown-item" href="#">Add new condition</a>
<a class="dropdown-item" href="#">Rename folder</a>
<a class="dropdown-item" href="#">Delete folder</a>
</div>
</div>
<!-- Heading -->
<a data-toggle="collapse" data-parent="#accordionEx78" href="#collapseUnfiled" aria-expanded="true"
aria-controls="collapseUnfiled">
<h5 class="mt-1 mb-0">
<span>Unfiled items</span>
<i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapseUnfiled" class="collapse" role="tabpanel" aria-labelledby="headingUnfiled"
data-parent="#accordionEx78">
<div class="card-body">
<!--Top Table UI-->
<div class="table-ui p-2 mb-3 mx-3 mb-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-12">
<!--Name-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Bulk actions</option>
<option value="1">Delete</option>
<option value="2">Change folder</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled>Show only</option>
<option value="1" selected>All <span> (2000)</span></option>
<option value="2">Clicks <span> (200)</span></option>
<option value="3">Page <span> (1800)</span></option>
<option value="4">Scroll <span> (200)</span></option>
<option value="5">Forms <span> (50)</span></option>
<option value="6">Time <span> (50)</span></option>
<option value="7">UTM <span> (50)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Filter</option>
<option value="1">All <span> (100)</span></option>
<option value="1">Active <span> (2000)</span></option>
<option value="2">Inactive <span> (1000)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Top Table UI-->
<!-- Table responsive wrapper -->
<div class="table-responsive mx-3">
<!--Table-->
<table class="table table-hover mb-0">
<!--Table head-->
<thead>
<tr>
<th>
<input class="form-check-input" type="checkbox" id="checkbox">
<label for="checkbox" class="mr-2 label-table"></label>
</th>
<th class="th-lg"><a>Name <i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Condition<i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Last edited<i class="fas fa-sort ml-1"></i></a></th>
<th></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox1">
<label for="checkbox1" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox2">
<label for="checkbox2" class="label-table"></label>
</th>
<td>Product Hunt Visitor</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>13.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox3">
<label for="checkbox3" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
<!-- Table responsive wrapper -->
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading79">
<!--Options-->
<div class="dropdown float-left">
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt"></i>
</button>
<div class="dropdown-menu dropdown-info">
<a class="dropdown-item" href="#">Add new condition</a>
<a class="dropdown-item" href="#">Rename folder</a>
<a class="dropdown-item" href="#">Delete folder</a>
</div>
</div>
<!-- Heading -->
<a data-toggle="collapse" data-parent="#accordionEx78" href="#collapse79" aria-expanded="true"
aria-controls="collapse79">
<h5 class="mt-1 mb-0">
<span>Folder 1</span>
<i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse79" class="collapse show" role="tabpanel" aria-labelledby="heading79"
data-parent="#accordionEx78">
<div class="card-body">
<!--Top Table UI-->
<div class="table-ui p-2 mb-3 mx-3 mb-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-12">
<!--Name-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Bulk actions</option>
<option value="1">Delete</option>
<option value="2">Change folder</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled>Show only</option>
<option value="1" selected>All <span> (2000)</span></option>
<option value="2">Clicks <span> (200)</span></option>
<option value="3">Page <span> (1800)</span></option>
<option value="4">Scroll <span> (200)</span></option>
<option value="5">Forms <span> (50)</span></option>
<option value="6">Time <span> (50)</span></option>
<option value="7">UTM <span> (50)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Filter</option>
<option value="1">All <span> (100)</span></option>
<option value="1">Active <span> (2000)</span></option>
<option value="2">Inactive <span> (1000)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Top Table UI-->
<!-- Table responsive wrapper -->
<div class="table-responsive mx-3">
<!--Table-->
<table class="table table-hover mb-0">
<!--Table head-->
<thead>
<tr>
<th>
<input class="form-check-input" type="checkbox" id="checkbox4">
<label for="checkbox4" class="mr-2 label-table"></label>
</th>
<th class="th-lg"><a>Name <i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Condition<i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Last edited<i class="fas fa-sort ml-1"></i></a></th>
<th></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox5">
<label for="checkbox5" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox6">
<label for="checkbox6" class="label-table"></label>
</th>
<td>Product Hunt Visitor</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>13.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox14">
<label for="checkbox14" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
<!-- Table responsive wrapper -->
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading80">
<!--Options-->
<div class="dropdown float-left">
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt"></i>
</button>
<div class="dropdown-menu dropdown-info">
<a class="dropdown-item" href="#">Add new condition</a>
<a class="dropdown-item" href="#">Rename folder</a>
<a class="dropdown-item" href="#">Delete folder</a>
</div>
</div>
<!-- Heading -->
<a data-toggle="collapse" data-parent="#accordionEx78" href="#collapse80" aria-expanded="true"
aria-controls="collapse80">
<h5 class="mt-1 mb-0">
<span>Folder 2</span>
<i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse80" class="collapse" role="tabpanel" aria-labelledby="heading80"
data-parent="#accordionEx78">
<div class="card-body">
<!--Top Table UI-->
<div class="table-ui p-2 mb-3 mx-3 mb-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-12">
<!--Name-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Bulk actions</option>
<option value="1">Delete</option>
<option value="2">Change folder</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled>Show only</option>
<option value="1" selected>All <span> (2000)</span></option>
<option value="2">Clicks <span> (200)</span></option>
<option value="3">Page <span> (1800)</span></option>
<option value="4">Scroll <span> (200)</span></option>
<option value="5">Forms <span> (50)</span></option>
<option value="6">Time <span> (50)</span></option>
<option value="7">UTM <span> (50)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Filter</option>
<option value="1">All <span> (100)</span></option>
<option value="1">Active <span> (2000)</span></option>
<option value="2">Inactive <span> (1000)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Top Table UI-->
<!-- Table responsive wrapper -->
<div class="table-responsive mx-3">
<!--Table-->
<table class="table table-hover mb-0">
<!--Table head-->
<thead>
<tr>
<th>
<input class="form-check-input" type="checkbox" id="checkbox7">
<label for="checkbox7" class="mr-2 label-table"></label>
</th>
<th class="th-lg"><a>Name <i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Condition<i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Last edited<i class="fas fa-sort ml-1"></i></a></th>
<th></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox8">
<label for="checkbox8" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox9">
<label for="checkbox9" class="label-table"></label>
</th>
<td>Product Hunt Visitor</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>13.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox10">
<label for="checkbox10" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
<!-- Table responsive wrapper -->
</div>
</div>
</div>
<!-- Accordion card -->
<!-- Accordion card -->
<div class="card">
<!-- Card header -->
<div class="card-header" role="tab" id="heading">
<!--Options-->
<div class="dropdown float-left">
<button class="btn btn-info btn-sm m-0 mr-3 p-2 dropdown-toggle" type="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-pencil-alt"></i>
</button>
<div class="dropdown-menu dropdown-info">
<a class="dropdown-item" href="#">Add new condition</a>
<a class="dropdown-item" href="#">Rename folder</a>
<a class="dropdown-item" href="#">Delete folder</a>
</div>
</div>
<!-- Heading -->
<a data-toggle="collapse" data-parent="#accordionEx78" href="#collapse81" aria-expanded="true"
aria-controls="collapse81">
<h5 class="mt-1 mb-0">
<span>Folder 3</span>
<i class="fas fa-angle-down rotate-icon"></i>
</h5>
</a>
</div>
<!-- Card body -->
<div id="collapse81" class="collapse" role="tabpanel" aria-labelledby="heading"
data-parent="#accordionEx78">
<div class="card-body">
<!--Top Table UI-->
<div class="table-ui p-2 mb-3 mx-3 mb-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-12">
<!--Name-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Bulk actions</option>
<option value="1">Delete</option>
<option value="2">Change folder</option>
</select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled>Show only</option>
<option value="1" selected>All <span> (2000)</span></option>
<option value="2">Clicks <span> (200)</span></option>
<option value="3">Page <span> (1800)</span></option>
<option value="4">Scroll <span> (200)</span></option>
<option value="5">Forms <span> (50)</span></option>
<option value="6">Time <span> (50)</span></option>
<option value="7">UTM <span> (50)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<select class="mdb-select colorful-select dropdown-info mx-2">
<option value="" disabled selected>Filter</option>
<option value="1">All <span> (100)</span></option>
<option value="1">Active <span> (2000)</span></option>
<option value="2">Inactive <span> (1000)</span></option>
</select>
<!--/Blue select-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!--Top Table UI-->
<!-- Table responsive wrapper -->
<div class="table-responsive mx-3">
<!--Table-->
<table class="table table-hover mb-0">
<!--Table head-->
<thead>
<tr>
<th>
<input class="form-check-input" type="checkbox" id="checkbox15">
<label for="checkbox15" class="mr-2 label-table"></label>
</th>
<th class="th-lg"><a>Name <i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Condition<i class="fas fa-sort ml-1"></i></a></th>
<th class="th-lg"><a>Last edited<i class="fas fa-sort ml-1"></i></a></th>
<th></th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox11">
<label for="checkbox11" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox12">
<label for="checkbox12" class="label-table"></label>
</th>
<td>Product Hunt Visitor</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>13.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
<tr>
<th scope="row">
<input class="form-check-input" type="checkbox" id="checkbox13">
<label for="checkbox13" class="label-table"></label>
</th>
<td>Test subscription</td>
<td>Scroll % is equal or greater than <strong>80</strong></td>
<td>12.06.2017</td>
<td>
<a><i class="fas fa-info mx-1" data-toggle="tooltip" data-placement="top"
title="Tooltip on top"></i></a>
<a><i class="fas fa-pen-square mx-1"></i></a>
<a><i class="fas fa-times mx-1"></i></a>
</td>
</tr>
</tbody>
<!--Table body-->
</table>
<!--Table-->
</div>
<!-- Table responsive wrapper -->
</div>
</div>
</div>
<!-- Accordion card -->
</div>
<!--/.Accordion wrapper-->