Accordion

Aroquiassamy LA ROZE pro premium asked 2 years ago

Hi @Damian,

I want to create a multi-level Accordion on Side-Nav.But When I Used to create a Accordion insde another accordion it remains active..i.e., parent and child are active.

Excpected Output: When I Clicked on Parent => inside which has child when i clicked child

both parent and child are in active state.

Take a look at code:

<mdb-side-nav #sidenav class="sn-bg-4" [fixed]="true">
    <mdb-navbar-brand>
      <li>
        <div class="logo-wrapper waves-light">
          <img class="img-fluid mx-auto d-block" src="assets/images/LmsERP/logo/lmsLogo-Small.png">
        </div>
      </li>
      <li class="py-2 text-center">
        LAROZE MULTISERVICES
      </li>
    </mdb-navbar-brand>
    <links>
      <li>
        <ul class="collapsible collapsible-accordion">
          <!-- Simple -->
          <mdb-accordion>
            <mdb-accordion-item class="no-collase">
              <mdb-accordion-item-head mdbWavesEffect>
                <i class="far fa-hand-pointer"></i> Simple link</mdb-accordion-item-head>
              <mdb-accordion-item-body></mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
          <!-- Single Nested -->
          <mdb-accordion>
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect>
                <i class="fas fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li>
                    <a href="#" class="waves-effect" mdbWavesEffect>Link 1</a>
                  </li>
                  <li>
                    <a href="#" class="waves-effect" mdbWavesEffect>Link 2</a>
                  </li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
          <!-- Multiple Nested -->
          <mdb-accordion [multiple]="true">
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect>
                <i class="far fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li>
                    <a href="#" class="waves-effect" mdbWavesEffect>Sub Link 1</a>
                  </li>
                  <li>
                    <a href="#" class="waves-effect" mdbWavesEffect>Sub Link 2</a>
                  </li>
                  <li>
                    <mdb-accordion>
                      <mdb-accordion-item>
                        <mdb-accordion-item-head mdbWavesEffect>
                          <i class="far fa-eye"></i> Collapsible sub menu 2</mdb-accordion-item-head>
                        <mdb-accordion-item-body>
                          <a href="#" class="waves-effect" mdbWavesEffect>Sub Link 3</a>
                        </mdb-accordion-item-body>
                      </mdb-accordion-item>
                    </mdb-accordion>
                  </li>
                </ul>
              </mdb-accordion-item-body>
            </mdb-accordion-item>
          </mdb-accordion>
        </ul>
      </li>
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>

Kindly Tell me where I was wrong and what should i do to achieve that structure..


Aroquiassamy LA ROZE pro premium commented 2 years ago

I Cant able to find the difference between active menu colors when i have more than one hierrachy...The above code works fine when i change theme but the original issue is with color difference between active parent and children..how to change that alone..


Damian Gemza staff answered 2 years ago

Dear Aroquiassamy,

The problem with the nested accordion background color looks like a bug. We'll investigate this behavior, but for now, I'm unable to provide you with some ETA on this, or even with some workaround.

Best Regards,

Damian


Damian Gemza staff answered 2 years ago

Dear Aroquiassamy

You have created the wrong markup. You have to use the one accordion, and in place, which you want to nest another accordion, you have to add the code of the second accordion inside the mdb-accordion-item-body element.

Please take a look at the below code:

<mdb-side-nav #sidenav class="sn-bg-4" [fixed]="true">
    <mdb-navbar-brand>
      <li>
        <div class="logo-wrapper waves-light">
          <img class="img-fluid mx-auto d-block" src="assets/images/LmsERP/logo/lmsLogo-Small.png">
        </div>
      </li>
      <li class="py-2 text-center">
        LAROZE MULTISERVICES
      </li>
    </mdb-navbar-brand>
    <links>
      <li>
        <ul class="collapsible collapsible-accordion">
          <mdb-accordion [multiple]="false" aria-multiselectable="false">

            <!-- Collapsible link -->
            <mdb-accordion-item>
              <mdb-accordion-item-head mdbWavesEffect><i class="fas fa-chevron-right"></i> Collapsible menu</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <ul>
                  <li><a href="#" class="waves-effect" mdbWavesEffect>Link 1</a></li>
                  <li><a href="#" class="waves-effect" 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><i class="far fa-hand-pointer"></i> 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><i class="far fa-eye"></i> Collapsible menu 2</mdb-accordion-item-head>
              <mdb-accordion-item-body>
                <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>
                      <a href="https://google.com">Link 1</a>
                    </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>
                      <a href="https://google.com">Link 2</a>
                    </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>
                      <a href="https://google.com">Link 3</a>
                    </mdb-accordion-item-body>
                  </mdb-accordion-item>
                </mdb-accordion>
              </mdb-accordion-item-body>
            </mdb-accordion-item>

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

          </mdb-accordion>
        </ul>
      </li>
    </links>
    <div class="sidenav-bg mask-strong"></div>
  </mdb-side-nav>

Best Regards,

Damian


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.0.0
  • Device: Desktop-Lenova
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No