Topic: Accordion
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..
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: Desktop-Lenova
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Aroquiassamy LA ROZE pro premium priority commented 6 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..