$(document).ready(function() {
			
  $('li ul').hide();
			
  $('a.arrow').click(function(e) {
    e.preventDefault();
    $(this).find('+ ul').toggle();
    $(this).toggleClass('active');
				
    s = $(this).parent().find('ul');
    $('a.arrow').parent().find('ul:visible').not(s).hide(0,function() {
      $(this).parent().find('a.arrow').removeClass('active'); 
    });
      // Wooo it works! Clicking a button hides the current open one and removes the 'active' class
  });
					

  $("a.arrow").mouseover(function(){ $(this).addClass('over')})
              .mouseout(function(){ $(this).removeClass('over')});
    // Hover class to be added or removed on hover. Don't need :hover css if using this
				
   
  $(document).click(function(event){ 		
    var target = $(event.target);
    if (target.parents("body li").length == 0) {				
      $("a.arrow").removeClass('active');
      $("a.arrow").parent().find("ul").hide();
    }
    event.stopPropagation();
  });
    // Hide all menus when clicking outside of them (i.e on the document)

});

jQuery click to show/hide menu, similar to desktop app

jquery

JavaScript