Expand and collapse of the multiple left sidebars

[zxo102]

Hi, there:

I modify AdminLTE3/index.html from

<div class="wrapper">
     <!-- Navbar -->
     <nav class="main-header navbar navbar-expand navbar-white navbar-light">...  </nav>

     <!-- Main Sidebar Container -->
     <aside class="main-sidebar sidebar-dark-primary elevation-4">...</aside>
     <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">... </div>  

    <footer class="main-footer">...</footer>
    <aside class="control-sidebar control-sidebar-dark">...</aside>
</div>
<!-- ./wrapper -->

to

<div class="wrapper">
     <!-- Navbar -->
     <nav class="main-header navbar navbar-expand navbar-white navbar-light">...  </nav>

<div id="001" style="display:block">
     <!-- Main Sidebar Container -->
     <aside class="main-sidebar sidebar-dark-primary elevation-4">...</aside>
     <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">... </div>  
</div>

<div id="002" style="display:none">
     <!-- Main Sidebar Container -->
     <aside class="main-sidebar sidebar-dark-primary elevation-4">...</aside>
     <!-- Content Wrapper. Contains page content -->
     <div class="content-wrapper">... </div>  
</div>

    <footer class="main-footer">...</footer>
    <aside class="control-sidebar control-sidebar-dark">...</aside>
</div>
<!-- ./wrapper -->

As a result, id “001” and "002" divs can be switched with display:block and display:none .

Everything is fine but the left sidebar menu can be expanded and can not be collapsed. With id "001" and "002" divs as above, for example,

1. Clicking Dashboard, it is expanded: Dashboard v1, Dashboard v2, Dashboard v3.
2. Clicking Dashboard again, it can not collapse.

Thanks a lot for any suggestions to fix it.

B.S (Keeping only one div of them: either "001" or "002", "expand" and "collapse" works fine).

Environment :

• AdminLTE Version: [v3.0.5]
• Operating System: [Window 10]
• Browser (Version): [ Chrome (Latest)]

[zxo102]

I got my solution by inserting

        //for example, the original left siderbar menu can be classified by two groups: "001" and "002"
       <div id='001' style="display block>...</div> 
        <div id='002' style="display none>...</div>

into AdminLTE3/index.html as follows: ....

     <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
              //for example, the original left siderbar menu can be classified by two groups: "001" and "002"
              <div id='001' style="display block>...</div>
              <div id='002' style="display none>...</div>

       </ul>
     </nav>

These two divs can be toggled by Js scripts. It works fine now with "expand" and "collapse".