Sidebar menu with Active and Show Class

I am checking. I will get back to you soon.

Hi sourav688,

Refer below code.

<nav class="navsidebar_menu">
    <ul class="sidebar-menu">
        <li class="active">
            <a href="index.html">
                <i class="fa fa-home"></i>Dashboard
            </a>
        </li>
        <li>
            <a class="collapse_link" href="javascript:void(0)">
                <i class="fa fa-th-large"></i>Student <span class="ic-down-arrow_blue"></span>
            </a>
            <ul class="sidebar-submenu">
                <li>
                    <a href="items-list.html">Student List </a>
                </li>
                <li>
                    <a href="item-editor.html">New Student </a>
                </li>
                <li>
                    <a href="item-editor.html">AAAAAAA </a>
                </li>
            </ul>
        </li>
        <li>
            <a class="collapse_link" href="javascript:void(0)">
                <i class="fa fa-area-chart"></i>Employee <span class="ic-down-arrow_blue"></span>
            </a>
            <ul class="sidebar-submenu">
                <li>
                    <a href="charts-flot.html">Employee List </a>
                </li>
                <li>
                    <a href="charts-morris.html">New Employee </a>
                </li>
                <li>
                    <a href="charts-morris.html">BBBBBBBBBBBB </a>
                </li>
            </ul>
        </li>
    </ul>
</nav>
<script>
    const linkCollapse = document.getElementsByClassName('collapse_link');
    for (var i = 0; i < linkCollapse.length; i++) {
        linkCollapse[i].addEventListener('click', function () {
            //Remove all active class.
            Array.from(document.getElementsByClassName("active")).forEach(function (el) {
                el.classList.remove('active');
            });
            //Add active class to clicked parentElement.
            this.parentElement.classList.toggle('active');

            const collapseMenu = this.nextElementSibling;

            //Remove all showCollapse class.
            Array.from(document.getElementsByClassName('showCollapse')).forEach(function (el) {
                el.classList.remove('showCollapse');
            });
            //Add showCollapse class to clicked SiblingElement.
            collapseMenu.classList.toggle('showCollapse');

            //Remove all sub_menu_item class.
            Array.from(document.getElementsByClassName('sub_menu_item')).forEach(function (el) {
                el.classList.remove('sub_menu_item');
                el.classList.remove('show');
            });

            //Add show class to all sub menu items.
            Array.from(collapseMenu.getElementsByTagName('li')).forEach(function (el) {
                el.classList.add('sub_menu_item');
                el.classList.add('show');
            });
        })
    }
</script>

for any reason, its still not working,

showing one error, 

3299 [Deprecation] Listener added for a

Hi sourav688,

Which line of code you are getting the error?