How to get accordion blocks style on Angular accordion compo


Topic: How to get accordion blocks style on Angular accordion component

Frank Kreutzer asked 5 years ago

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?


Arkadiusz Idzikowski staff answered 5 years ago

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)' }
    ];
  }

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: 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