Prevent sidenav translation when clicking parent in accordio


Topic: Prevent sidenav translation when clicking parent in accordion

solinub pro premium asked 4 days ago

I have a side-nav with several links. Now I need to add a subsection in one of these links to add several sub-links. I've managed to add an accordion and it works as expected however when clicking in the parent element the sidenav translates outside the screen and I would like to override that action in the parent and only fire it in the proper sub-items.

My HTML:

<div id="slide-out" class="side-nav sn-bg-4" style="width: 240px; transform: translateX(0px);">
<ul class="custom-scrollbar">                
    <li>
        <div class="logo-wrapper waves-light">              
                1.6.1
            </div>
        </div>                    
    </li>
    <li>
        <ul class="collapsible collapsible-accordion">
                <li>
                    <a href="client" class="waves-effect waves-light">
                        <i class="fas fa-briefcase fa-2x"></i> ITEM 1
                    </a>
                </li>
                <li>
                    <a href="deviceManager" class="waves-effect waves-light">
                        <i class="fas fa-magnet fa-2x"></i> ITEM 2
                    </a>
                </li>   
                <li>
                    <div class="accordion" id="accordionExample">
                        <div class="accordion-item">
                            <button class="accordion-header" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                <i class="fas fa-chart-pie" style="min-width:13px"></i> ITEM 3
                            </button>
                            <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
                                <div class="accordion-body">
                                    <ul>
                                        <li>
                                            <a href="statistic" class="waves-effect waves-light">
                                                <i class="fas fa-chart-pie" style="min-width:13px"></i> ITEM 3.1
                                            </a>
                                        </li>
                                        <li>
                                            <a href="statistic" class="waves-effect waves-light">
                                                <i class="fas fa-chart-pie" style="min-width:13px"></i> ITEM 3.2
                                            </a>
                                        </li>
                                    </ul>
                                </div>                                            
                            </div>
                        </div>
                    </div>
                </li>                    
        </ul>
    </li>
</ul>

Any ideas on how to do that? Thank you


Marcin Luczak staff commented 3 days ago

Hi,

I cannot reproduce your problem with the code you've provided as you have overwritten the default style of the sidenav with style="width: 240px; transform: translateX(0px);". Can you paste a working snippet that reproduces your problem or provide a video showing what is wrong?

Best, Marcin


solinub pro premium commented 3 days ago

Dear Marcin, Thank you for your reply. I've created a video showing the behavior, but I do not see how to attach it here.

Could you let me know how to provide it to you? It's about 30MB


Marcin Luczak staff commented 2 days ago

Please upload your video to any type of video hosting page, e.g Vimeo, and paste a link to it.

Regards, Marcin


Please insert min. 20 characters.
Status

Open

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: jQuery
  • MDB Version: 4.19.1
  • Device: PC
  • Browser: chorme
  • OS: Windows
  • Provided sample code: No
  • Provided link: No