helloWorld

.menuContainer {
	width: 150px;
	cursor: pointer;
}
 
.menuTile {
	font-family: Helvetica,Arial;
	font-size: 16px;
	color: #000000;
	border: 1px solid;
	width: 100%;
	cursor: pointer;
	background-color: silver;
	margin-top: 4px;
	padding: 5px;
}
 
.innerMenu {
	font-family: Helvetica,Arial;
	font-size: 12px;
	color: #000000;
	border: 1px solid;
	width: 100%;
	cursor: pointer;
	background-color: #F3F3F3;
	margin-top: 1px;
	padding: 5px;
}

<div id="menu" class="menuContainer">
			<div class="menuTile">
				Title 1
			</div>
		  <div class="outer">
			  <div class="innerMenu">
			  	<div style="padding-left: 20px;">
			  		Menu1<br/>
			  		Menu2
			  	</div>
			  </div>
		  </div>
		  <div class="menuTile">
				Title 2
			</div>
		  <div class="outer">
				<div class="innerMenu">
			  	<div style="padding-left: 20px;">
			  		Menu1<br/>
			  		Menu2
			  	</div>
		   </div>
		  </div>
		  <div class="menuTile">
				Title 3
			</div>
		  <div class="outer">
				<div class="innerMenu">
			  	<div style="padding-left: 20px;">
			  		Menu1<br/>
			  		Menu2
			  	</div>
		  	</div>
		  </div>
		</div>

 
	fadeDur = 0.5;
	SlideDur = 0.5;
 
  function docLoaded() {
		$A($('menu').getElementsByClassName('outer')).each(function(node){
			Element.hide(node);
			Event.observe(node.previous('div'), 'click', function(){
					hidden = !node.visible();
					$A($('menu').getElementsByClassName('outer')).each(function(to_hide_nodes){
						if ((to_hide_nodes != node)&&(to_hide_nodes.visible())) {
							Effect.Fade(to_hide_nodes,{duration:fadeDur});
							Effect.SlideUp(to_hide_nodes,{duration:SlideDur});
						}
					});
					if (hidden) {
						Effect.Fade(node,{duration:fadeDur, from: 0.0, to: 1.0});
						Effect.SlideDown(node,{duration:SlideDur});
					}
					else {
						Effect.Fade(node,{duration:fadeDur});
						Effect.SlideUp(node,{duration:SlideDur});
					}
				}, node);
		});
  }