Sidebar changing content of menu using jQuery-CodePudding

Hello guys, Can anyone help me with how to do this? My goal is when I click the mainmenu the submenu will show and when I click the submenu the subChildmenu will show. Can any please help me with how to accomplish it using jQuery? Just like on this video https://www.screencast.com/t/C85Oiz3jnfLb

* {
  padding: 0;
  margin: 0;
}

.sidebar {
    position: absolute;
    left: 0;
    background: yellow;
    padding: 10px;
    height: 100vh;
    width: 320px;
}

<div >
  <div >
    <div >Home</div>
    <div >Budget</div>
    <div >Main Menu 3</div>
  </div>
  
  <div >
    <div >Data Config</div>
    <div >Data Setup</div>
    <div >submenu 3</div> 
  </div>
  
  <div >
    <div >Budget Period</div>
    <div >Budget Date</div>
    <div >subChildmenu 3</div>    
  </div>
</div>

CodePudding user response：

I have added two #id toggele-submenu and toggle-subChildmenu, and you can take the below jQuery script for referrence.

/*Hide menu by default*/
$(document).ready(function() {
  $(".sidebar-submenu").hide();
  $(".sidebar-subChildmenu").hide();
});

/*When menu button is clicked, toggle the menu*/
$("#toggle-submenu").click(function(event) {
  event.stopPropagation();
  $(".sidebar-submenu").slideToggle();
});
$("#toggle-subChildmenu").click(function(event) {
  event.stopPropagation();
  $(".sidebar-subChildmenu").slideToggle();
});

* {
  padding: 0;
  margin: 0;
}

.sidebar {
  position: absolute;
  left: 0;
  background: yellow;
  padding: 10px;
  height: 100vh;
  width: 320px;
}

<div >
  <div >
    <div >Home</div>
    <div >Budget</div>
    <div id="toggle-submenu" >Main Menu 3</div>
  </div>

  <div >
    <div >Data Config</div>
    <div >Data Setup</div>
    <div id="toggle-subChildmenu" >submenu 3</div>
  </div>

  <div >
    <div >Budget Period</div>
    <div >Budget Date</div>
    <div >subChildmenu 3</div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

CodePudding user response：

You can add other checks into your click handler, such as determining whether or not an item has a class, or children - but at a base level, the easiest thing to do is stop propagation through parent elements.

jQuery(document).on('click', '.sidebar-subChildmenu', function(e){
  e.stopPropagation();
  jQuery(this).toggleClass('active');  
});