Accordion won\'t expand.


Topic: Accordion won\'t expand.

cparrish pro asked 6 years ago

Expected behavior mdb-accordion-item-body will show it's self when expanded.

Actual behavior item-body does not show itself.

Resources (screenshots, code snippets etc.)

What I have in app.module.ts

import { MDBBootstrapModulesPro, MDBSpinningPreloader, AccordionModule, WavesModule } from 'ng-uikit-pro-standard';

Then

imports: [
    BrowserModule,
    HttpClientModule,
    MDBBootstrapModulesPro.forRoot(),
    UserModule,
  ],

In the component I have. import { AccordionModule, WavesModule } from 'ng-uikit-pro-standard';

Finally in the template I have.

<main>
  Welcome Back {{ name }}
  <mdb-accordion [multiple]="false">
      <mdb-accordion-item [collapsed]="false">
        <mdb-accordion-item-head>Collapsible Group Item #1</mdb-accordion-item-head>
        <mdb-accordion-item-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.
        </mdb-accordion-item-body>
      </mdb-accordion-item>

      <mdb-accordion-item>
        <mdb-accordion-item-head>Collapsible Group Item #2</mdb-accordion-item-head>
        <mdb-accordion-item-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.
        </mdb-accordion-item-body>
      </mdb-accordion-item>

      <mdb-accordion-item>
        <mdb-accordion-item-head>Collapsible Group Item #3</mdb-accordion-item-head>
        <mdb-accordion-item-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.
        </mdb-accordion-item-body>
      </mdb-accordion-item>
    </mdb-accordion>

The item-body isn't visiable though. Please help me figure out what I'm doing wrong.


cparrish pro answered 6 years ago

I needed to add import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; and

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MDBBootstrapModulesPro.forRoot(),
    UserModule
  ],

To my app.module.ts Seems to be working fine now.


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No