Topic: How to get accordion blocks style on Angular accordion component
There is no documentation that shows how to get the jQuery "accordion-blocks" class styles on the Angular version of the accordion component. Under the "Examples & Customization" tab for the accordions, the example that looks like the block style either doesn't work or isn't documented. How can I get this to work?
Add comment
It looks like there are some problems with html code in the documentation, we will take a closer look at that. If you need 'Accordion with a table' example in Angular version, please use this code:
HTML:
<mdb-accordion>
<mdb-accordion-item>
<mdb-accordion-item-head [customClass]="'blue-text'">Folder 1</mdb-accordion-item-head>
<mdb-accordion-item-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-->
<mdb-select
[options]="optionsSelect1"
placeholder="Bulk actions"
class="colorful-select dropdown-primary"
></mdb-select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect2"
placeholder="Show only"
class="colorful-select dropdown-primary"
></mdb-select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect3"
placeholder="Filter"
class="colorful-select dropdown-primary"
></mdb-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>
<mdb-checkbox></mdb-checkbox>
</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">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Product Hunt Visitor</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-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 -->
</mdb-accordion-item-body>
</mdb-accordion-item>
<mdb-accordion-item>
<mdb-accordion-item-head [customClass]="'blue-text'">Folder 2</mdb-accordion-item-head>
<mdb-accordion-item-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-->
<mdb-select
[options]="optionsSelect1"
placeholder="Bulk actions"
class="colorful-select dropdown-primary"
></mdb-select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect2"
placeholder="Show only"
class="colorful-select dropdown-primary"
></mdb-select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect3"
placeholder="Filter"
class="colorful-select dropdown-primary"
></mdb-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>
<mdb-checkbox></mdb-checkbox>
</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">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Product Hunt Visitor</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-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 -->
</mdb-accordion-item-body>
</mdb-accordion-item>
<mdb-accordion-item>
<mdb-accordion-item-head [customClass]="'blue-text'">Folder 3</mdb-accordion-item-head>
<mdb-accordion-item-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-->
<mdb-select
[options]="optionsSelect1"
placeholder="Bulk actions"
class="colorful-select dropdown-primary"
></mdb-select>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect2"
placeholder="Show only"
class="colorful-select dropdown-primary"
></mdb-select>
<!--/Blue select-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-xl-4 col-lg-6 col-md-6">
<!--Blue select-->
<mdb-select
[options]="optionsSelect3"
placeholder="Filter"
class="colorful-select dropdown-primary"
></mdb-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>
<mdb-checkbox></mdb-checkbox>
</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">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Product Hunt Visitor</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-square mx-1"></i>
</a>
<a>
<i class="fas fa-times mx-1"></i>
</a>
</td>
</tr>
<tr>
<th scope="row">
<mdb-checkbox></mdb-checkbox>
</th>
<td>Test subscription</td>
<td>
<code>Scroll %</code> equals 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-pencil-alt-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 -->
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>
TS:
optionsSelect1: Array<any>;
optionsSelect2: Array<any>;
optionsSelect3: Array<any>;
ngOnInit() {
this.optionsSelect1 = [
{ value: '1', label: 'Delete' },
{ value: '2', label: 'Change folder' }
];
this.optionsSelect2 = [
{ value: '1', label: 'All (2000)' },
{ value: '2', label: 'Click (200)' },
{ value: '2', label: 'Page (1800)' },
{ value: '2', label: 'Scroll (200)' },
{ value: '2', label: 'Forms (50)' },
{ value: '2', label: 'Time (50)' },
{ value: '2', label: 'UTM (50)' }
];
this.optionsSelect3 = [
{ value: '1', label: 'All (100)' },
{ value: '2', label: 'Active (2000)' },
{ value: '2', label: 'Inactive (1000)' }
];
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: PC
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No