Tree menu in with json

iam creating desktop app, is it possible to run as windows application? i am creating tree menu , its expanding but not closing, how can i i make it close when i click again same button?
my code is:
HTML code:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>IETM</title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="ietm.css">
    <style>
    </style>
    <!--<script type="application/javascript" src="bootstrap-4.3.1-dist/js/bootstrap.js"> </script>
    <script type="application/javascript" src="jQuery_v3_4_1.js"> </script>-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>

    <script type="application/javascript" src="ietm.js"> </script>
    <script>

    </script>

</head>

<body>
	<div class="header">
		<img class="header_img" src="assets/Shell_Header.svg" alt=""/>	
		<span>V1.0.0</span>
		<span>
		</span>
		<div style="width: 20%; text-align: right; border: 2px solid #ca4747">
			<!-- <input type="text" id="extSearch"> -->
			<div id="extSearch"></div>
			<button id='voiceBtn' onclick="start_convert()">Voice Search</button>
    		<br><br>
			<span id='message'></span>
		</div>
	</div>	
	<div id="content">
			<div class="split menu" id="menu">				
				<div class="search" action="/action_page.php">
				  <input type="text" placeholder="Search.." name="search">
				  <button type="submit"><i class="fa fa-search"></i></button>
				</div>
						
				<div class="menuList" id="tocmenu">
						<!-- load Menu Here;-->
				</div>
			</div>
				
			
			<div class="split textContent">
				<div class="textpanelTitle">Content</div>
				  <iframe id="loadTextContent"></iframe>
			</div>
			<div class="split right" align="center">				
			 	<iframe id="loadVideoContent"></iframe>
			</div>
	</div>
	
		<script>
			var message = document.querySelector('#extSearch');
	
			var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
			var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
	
			var grammar = '#JSGF V1.0;'
	
			var recognition = new SpeechRecognition();
			var speechRecognitionList = new SpeechGrammarList();
			speechRecognitionList.addFromString(grammar, 1);
			recognition.grammars = speechRecognitionList;
			recognition.lang = 'en-US';
			recognition.interimResults = false;
	
			recognition.onresult = function(event) {
				var last = event.results.length - 1;
				var command = event.results[last][0].transcript;
				message.textContent =  command;
			};
	
			recognition.onspeechend = function() {
				recognition.stop();
			};
	
			recognition.onerror = function(event) {
				message.textContent = 'Error occurred in recognition: ' + event.error;
			}        
	
			document.querySelector('#voiceBtn').addEventListener('click', function(){
				recognition.start();
	
			});
	
		</script>
</body>
</html>

js file

$(document).ready(function () {
  var menuList;
  var setMenuDiv = "";

  function loadMenu() {
    $.getJSON("ietm_menu.json", function (data) {
      menuList = data;
      var mainInc = 0;
      var sub1Inc = 0
      var sub2Inc = 0;
      var sub3Inc = 0;
      var sub4Inc = 0;
      var sub5Inc = 0;

      for (var menu of data.menu) {
        mainInc++;
        sub1Inc = 0;
        sub2Inc = 0;
        sub3Inc = 0;
        sub4Inc = 0;
        sub5Inc = 0;
        setMenuDiv += '<ul class="mainMenu">';
        setMenuDiv += '<li id="m_' + mainInc + '" data-filename="' + ((menu.fileName != "") ? menu.fileName : "") + '" data-submenu="' + menu.subtitle.length + '">';
        setMenuDiv += '<span>' + menu.name + '</span>';
        if (menu.subtitle.length != 0 || menu.subtitle.length != undefined) {
          setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
     
        //setMenuDiv +='<div class="menuList mainMenu" id="m'+mainInc+'"><div class="menuText"><span>'+menu.name+'</span><span class="fa fa-search" style="position:realitive;float:right;vertical-align:middle;"></span></div><div class="space"></div></div></div>'											
        //alert(menu.subtitle.length);
        setMenuDiv += '<ul class="subMenu1">';
        for (var subtitle1 of menu.subtitle) {
          sub1Inc++;
          sub2Inc = 0;
          sub3Inc = 0;
          sub4Inc = 0;
          sub5Inc = 0;
          setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '" data-filename="' + ((subtitle1.fileName != "") ? subtitle1.fileName : "") + '" data-submenu="' + subtitle1.subtitle.length + '">';
          setMenuDiv += '<span>' + subtitle1.name + '</span>';
          if (subtitle1.subtitle.length != 0 && subtitle1.subtitle.length != undefined) {
            setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
          }
          setMenuDiv += '</li>';
          //setMenuDiv +='<div class="menuList subMenu1" id="m_'+mainInc+'_'+sub1Inc+'"><p>'+subtitle1.name+'</p></div>'
          setMenuDiv += '<ul class="subMenu2">';

          for (var subtitle2 of subtitle1.subtitle) {
            sub2Inc++;
            sub3Inc = 0;
            sub4Inc = 0;
            sub5Inc = 0;
            setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '" data-filename="' + ((subtitle2.fileName != "") ? subtitle2.fileName : "") + '"  data-submenu="' + subtitle2.subtitle.length + '">';
            setMenuDiv += '<span>' + subtitle2.name + '</span>';
            if (subtitle2.subtitle.length != 0 && subtitle2.subtitle.length != undefined) {
              setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
            }

            setMenuDiv += '</li>';
            //setMenuDiv +='<div class="menuList subMenu2" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'"><p>'+subtitle2.name+'</p></div>'
            setMenuDiv += '<ul class="subMenu3">';
            for (var subtitle3 of subtitle2.subtitle) {
              sub3Inc++;
              sub4Inc = 0;
              sub5Inc = 0;
              setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '_' + sub3Inc + '" data-filename="' + ((subtitle3.fileName != "") ? subtitle3.fileName : "") + '"  data-submenu="' + subtitle3.subtitle.length + '">';
              setMenuDiv += '<span>' + subtitle3.name + '</span>';
              if (subtitle3.subtitle.length != 0 && subtitle3.subtitle.length != undefined) {
                setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
              }
              setMenuDiv += '</li>';
              //setMenuDiv +='<div class="menuList subMenu3" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'_'+sub3Inc+'"><p>'+subtitle3.name+'</p>'
              setMenuDiv += '<ul class="subMenu4">';
              for (var subtitle4 of subtitle3.subtitle) {
                sub4Inc++;
                sub5Inc = 0;
                setMenuDiv += '<li id="m_' + mainInc + '_' + sub1Inc + '_' + sub2Inc + '_' + sub3Inc + '_' + sub4Inc + '" data-filename="' + ((subtitle4.fileName != "") ? subtitle4.fileName : "") + '"  data-submenu="' + subtitle4.subtitle.length + '">';
                setMenuDiv += '<span>' + subtitle4.name + '</span>';
                if (subtitle4.subtitle.length != 0 && subtitle4.subtitle.length != undefined) {
                  setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
                }
                setMenuDiv += '<span class="down_arrow"><i class="fa fa-chevron-down"></i></span>';
                setMenuDiv += '</li>';
                setMenuDiv += '</ul>';
                //setMenuDiv +='<div class="menuList subMenu4" id="m_'+mainInc+'_'+sub1Inc+'_'+sub2Inc+'_'+sub3Inc+'_'+sub4Inc+'"><p>'+subtitle4.name+'</p></div>'

              }
              setMenuDiv += '</ul>';
            }
            setMenuDiv += '</ul>';
          }
          setMenuDiv += '</ul>';
            }
          }
          setMenuDiv += '</li>';
        setMenuDiv += '</ul>';
        setMenuDiv += '</ul>';
        setMenuDiv += '<div class="space"></div>';
      } //*/								
      loadContent(setMenuDiv);
    });

  }

  function loadContent(aValues) {
    document.getElementById("tocmenu").innerHTML += aValues;

    $('li').click(function (evt) {
      $("#" + this.id).css("background-color", "#00FF00");
      var subMenuNum = $(this).data("submenu");
		//console.log($(evt.target).nodeName());
      if ($(this).data("name") != "" && $(this).data("filename") != "") {
		  
		//$(".textpanelTitle").innerHTML = $(evt.target).children().text();
        $("#loadTextContent").attr("src", 'Menus/' + $(this).data("filename"));
      }

      var splitId = this.id.split("_");
      if (splitId.length == 2) {
        showMenus('m_' + splitId[1], subMenuNum);
      } else if (splitId.length == 3) {
        showMenus('m_' + splitId[1] + "_" + splitId[2], subMenuNum);
      } else if (splitId.length == 4) {
        showMenus('m_' + splitId[1] + "_" + splitId[2] + "_" + splitId[3], subMenuNum);
      } else if (splitId.length == 5) {
        showMenus('m_' + splitId[1] + "_" + splitId[2] + "_" + splitId[3] + "_" + splitId[4], subMenuNum);
      }
		evt.preventDefault();
    });

  }

  function showMenus(aName, aLoopValue) {
    for (var a = 1; a <= aLoopValue; a++) {
      $('#' + aName + "_" + a).parent().css("display", "block");
    }
  }
  loadMenu();
}); // JavaScript Document

window.addEventListener('message', (event) => {
	console.log("window Post Message: ");
	console.log(event.data);
  var getObj = event.data;
  if (getObj.F2D != "") {
    $("#loadVideoContent").attr("src", 'Menus/' + getObj.F2D);
  } else if (getObj.F3D != "") {
    $("#loadVideoContent").attr("src", 'Menus/' + getObj.F3D);
  } else if (getObj.FAR != "") {
	  // code here
  } else if (getObj.FVR != "") {
	  // code here
  } else if (getObj.FPR != "") {
	  // code here
  }

  //this.searchfun(event.data.faultcode);
});

css file:

@charset "utf-8";
/* CSS Document */

html,body
{		
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;	
	
}	

.header
	{
		width: 100%;		
		background-color: #2C405A;	
	}
.header span
	{
		font-family: "SF Pro Display";
		font-size: 10px;		
		text-align: center;
		color: white;
	}

/*div{
	width: 100%;
	height: 100%;
}*/

#content
{
	background-color: white;
	height: 100%;
}
iframe
{			
	width: 99%;
	padding-top:2px;
	height: 100%;			
	border: none;
}
header
{	
	height: 6%;
	background:#2c405a;
}
.split {		 		 
  position: relative;
  top:0;
  float: left;
}


.textContent {	
	min-width: 37%;
	max-width: 39%;
	height: 100%;
 	left: 0%; 
	background-color: white;
	border-right: .1em solid #1c293b;
}

.right {  
  display:inline-table;
  vertical-align:middle;  
	height: 100%;
  width: 40.91%;	
  right: 0%; 
  background-color: white;
	
}

.menu {
	width: 20%;
	height: 100%;
	left: 0;
	background-color: #1c293b;
}



.menuList
{	
	max-height: 86.75%;	
	overflow: auto;
	cursor: pointer;
}
.menuText,.mainMenu
{		
	display: inline-table;    
	color: #89929e;			
}
.menuText p
{
	padding-left: 1%;
}

* {
  box-sizing: border-box;
}

div.search input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid grey;
  float: left;
  width: 80%;
  background: #f1f1f1;
}

div.search button {
  float: left;
  width: 20%;
  padding: 10px;
  background: #2196F3;
  color: white;
  font-size: 17px;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
}

div.search button:hover {
  background: #0b7dda;
}

div.search::after {
  content: "";
  clear: both;
  display: table;
}
.menuList ul
{
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 30px;
}
.menuList li
{		
	list-style: none;
	margin: 0;
	padding: 0;
	border: none;
	line-height: 30px;
}

.menu_text
{
	padding-left: 5px;
	text-indent: 10px;			
}

.down_arrow
{
	padding-right: 10px;
	float: right;
}

.mainMenu li span
{
	padding-left: 5px;
	text-indent: 10px;	
}
.subMenu1 li span
{
	padding-left: 10px;
	text-indent: 10px;	
}

.subMenu2 li span
{
	padding-left: 15px;
	text-indent: 10px;	
}
.subMenu3 li span
{
	padding-left: 20px;
	text-indent: 10px;	
}
.subMenu4 li span
{
	padding-left: 25px;
	text-indent: 10px;	
}


.subMenu1,.subMenu2,.subMenu3,.subMenu4
{
	display: none;	
}

.space
{	
	height: 1px;	
	background: #89929e;
}

.textpanelTitle
{
	margin-top: 5px; 
	margin-left: 5px;
	width: 98%;		
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 10px;
	background-color: #323639;
	color: white;
	resize: vertical;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 18px;
}

pls help me how can i close the tree menu when click again same button

Is this thread in the right place? You’ve put it in the Angular subforum, but it does not look Angular-y at all.