Display active Main Menu and sub Menu using CSS and javascript

Question

I have left side menus.

<div class="panel">
    <div class="panel-heading panel-red" role="tab" id="headingDash" style="">
        <a role="button" data-toggle="collapse" data-parent="#accordionMenu" href="#collapseDash" aria-expanded="true" aria-controls="collapseDash" class="menuList" style="">
            <i class="fa fa-dashboard" style=" padding: 15px;color: #fff"></i>
            Dashoboard
        </a>
    </div>
    <div id="collapseDash" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingDash">
        <div class="panel-body">
            <ul class="nav">
                <li class="subMenuList active" style=" ">
                    <a href="#" style="">Dashboard-1</a>
                </li>
                <li class="subMenuList" style="">
                    <a href="#" style="">Dashboard-2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

I want to display active main menu and sub menus. On-click of sub menu using css and JS. I have done it for static main menu and sub menus.

My Fiddle link: https://jsfiddle.net/whv76xd0/6/

How can do this dynamic on click?

Working Fiddle link

Answer 1

Try this.

$(document).ready(function(){
    $(document).on("click", ".subMenuList", function(){
        $('.panel-heading').removeClass('panel-red');
        $('.subMenuList').removeClass('active');
      $(this).closest('.panel').find('.panel-heading').addClass('panel-red');
      $(this).closest('.panel').find('.panel-heading').removeClass('panel-head');
      $(this).addClass('active');
    })
})

Answer 2

@pavan, If you want to handle dynamic link of submenu, then try with below jQuery function.

$(document).ready(function(){
    $(document).on("click",".subMenuList",function(){
      alert();
    })
})

Here, instead of alert you can put, any functionality which you want to perform with submenu click event