Basic accordion with inner components

Topic: Basic accordion with inner components

bitjuice pro asked 4 years ago

Hi,

I have an accordion with multiple items. Each item is encapsulated in a different angular component in this way:

<mdb-accordion [multiple]="false" aria-multiselectable="false">
<app-first-item></app-first-item>
<app-second-item></app-second-item>
....
</mdb-accordion>

And the code of <app-first-item> and <app-second-item> (and so on) components is like this one:

<mdb-accordion-item >
  <mdb-accordion-item-head mdbWavesEffect>
    <i class="fas fa-key mr-2"></i>Item title
  </mdb-accordion-item-head>
  <mdb-accordion-item-body>
   .....
  </mdb-accordion-item-body>
</mdb-accordion-item>

I want that only one collapsed item to be shown at the same time, but with this code, it works in multiple mode (it allows to open many cards at the same time).

If I remove the intermediates components and put the code directly in the main component, it works.

Is there a way to fix it?

Thanks

Marco

Add comment

Konrad Stępień staff answered 4 years ago

0 0 Best answer

Hi <a href="/profile/?id=48030" target="_blank" rel="nofollow">@bitjuice</a>,

You need something like this?

<mdb-accordion-item>
 <mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
 </mdb-accordion-item-head>
 <mdb-accordion-item-body>
 <ul>
 <li><a href="#" mdbWavesEffect>Link 1</a></li>
 <li><a href="#" mdbWavesEffect>Link 2</a></li>
 </ul>
 </mdb-accordion-item-body>
 </mdb-accordion-item>

<mdb-accordion-item class="no-collase">
 <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
 </mdb-accordion-item-head>
 <mdb-accordion-item-body></mdb-accordion-item-body>
 </mdb-accordion-item>

<mdb-accordion-item>
 <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
 </mdb-accordion-item-head>
 <mdb-accordion-item-body>
 <ul>
 <li><a href="#" mdbWavesEffect>Link 1</a></li>
 <li><a href="#" mdbWavesEffect>Link 2</a></li>
 </ul>
 </mdb-accordion-item-body>
 </mdb-accordion-item>

<mdb-accordion-item class="no-collase">
 <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head>
 <mdb-accordion-item-body></mdb-accordion-item-body>
 </mdb-accordion-item>

</mdb-accordion>
</code></pre>

Example of how this work: <a href="https://ng-demo.mdbootstrap.com/navigation/side-nav" target="_blank" rel="nofollow">https://ng-demo.mdbootstrap.com/navigation/side-nav</a>

Please insert min. 20 characters.

Hi @bitjuice,

You need something like this?

  <mdb-accordion [multiple]="false" aria-multiselectable="false">

    <!-- Collapsible link -->
    <mdb-accordion-item>
      <mdb-accordion-item-head mdbWavesEffect><mdb-icon fas icon="chevron-right"></mdb-icon> Collapsible menu
      </mdb-accordion-item-head>
      <mdb-accordion-item-body>
        <ul>
          <li><a href="#" mdbWavesEffect>Link 1</a></li>
          <li><a href="#" mdbWavesEffect>Link 2</a></li>
        </ul>
      </mdb-accordion-item-body>
    </mdb-accordion-item>

    <!-- Simple link -->
    <mdb-accordion-item class="no-collase">
      <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="hand-pointer"></mdb-icon> Simple link
      </mdb-accordion-item-head>
      <mdb-accordion-item-body></mdb-accordion-item-body>
    </mdb-accordion-item>

    <!-- Collapsible link -->
    <mdb-accordion-item>
      <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="eye"></mdb-icon> Collapsible menu 2
      </mdb-accordion-item-head>
      <mdb-accordion-item-body>
        <ul>
          <li><a href="#" mdbWavesEffect>Link 1</a></li>
          <li><a href="#" mdbWavesEffect>Link 2</a></li>
        </ul>
      </mdb-accordion-item-body>
    </mdb-accordion-item>

    <!-- Simple link -->
    <mdb-accordion-item class="no-collase">
      <mdb-accordion-item-head mdbWavesEffect><mdb-icon far icon="gem"></mdb-icon> Simple link 2</mdb-accordion-item-head>
      <mdb-accordion-item-body></mdb-accordion-item-body>
    </mdb-accordion-item>

  </mdb-accordion>

Example of how this work: https://ng-demo.mdbootstrap.com/navigation/side-nav

bitjuice pro commented 4 years ago

Hi Konrad,

yes but I need each mdb-accordion-item to be encapsulated in an external component, so I can reuse it in others mdb-accordion

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: 9.3.0
Device: PC
Browser: Chorme
OS: Windows 10
Provided sample code: Yes
Provided link: No

bitjuice

Pro User 472Support score
44Questions 25Answers 0Snippets