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