Открытие меню по клику

function addInput() { 
	var code = document.querySelector('.code'); 
	var block = document.getElementById('add-form'); 
	var posInput = document.getElementById('pos-input'); 
	var input = document.createElement('input'); 
	var titleInput = document.createElement('span'); 
	var edit = document.createElement('button'); 
	var div = document.createElement('div'); 
	var changeInput = document.createElement('input'); 
	var label = document.createElement('label'); 
	var changeTitle = document.createElement('button'); 
	var avrBlock = document.createElement('div'); 
	var editBlock = document.createElement('div'); 
	input.id = "input"; 
	input.type = "text"; 
	titleInput.className = "title-input"; 
	titleInput.innerHTML = "Имя"; 
	edit.className = "edit"; 
	div.className = "block-btn"; 
	changeInput.id = "change-input"; 
	changeInput.type = "text"; 
	label.innerHTML = "Заголовок поля:"; 
	changeTitle.id = "change-title"; 
	changeTitle.innerHTML = "Поменять заголовок"; 
	avrBlock.className = "avrage-block"; 
	editBlock.className = "edit-block"; 
	changeTitle.onclick = function() { 
		var changeInput = document.getElementById('change-input').value; 
		var codeResult = document.getElementById('input-title-name'); 
var titleInput = document.querySelector('.title-input'); 
codeResult.innerHTML = changeInput; 
titleInput.innerHTML = changeInput; 
	} 
	avrBlock.appendChild(titleInput); 
	avrBlock.appendChild(div); 
	avrBlock.appendChild(input); 
	avrBlock.appendChild(edit); 
	avrBlock.appendChild(label); 
	avrBlock.appendChild(changeInput); 
	avrBlock.appendChild(changeTitle); 
	avrBlock.appendChild(editBlock); 
	div.appendChild(input); 
	div.appendChild(edit); 
	editBlock.appendChild(label); 
	editBlock.appendChild(changeInput); 
	editBlock.appendChild(changeTitle); 
	posInput.appendChild(avrBlock); 
	block.appendChild(posInput); 
	edit.onclick = function() { 
		var dropDown = document.querySelector(".edit-block");  
    if (dropDown.currentStyle) { 
        var displayStyle = dropDown.currentStyle.display; 
    } else if (window.getComputedStyle) { 
        var displayStyle = window.getComputedStyle(dropDown, null).getPropertyValue("display"); 
    } 
 
    if (displayStyle == "none") { 
      dropDown.style.display = "block"; 
    } 
    else { 
      dropDown.style.display = "none"; 
    } 
	} 
		code.innerHTML +=  
	" &lt;span class='title-input'&gt;" + "<span id='input-title-name'>Имя</span>" + "&lt;/span&gt;&lt;input id='input' type='text'&gt;" + '<br>'; 
} 
function  increaseHeight() { 
	var block = document.getElementById('add-form'); 
	block.style.height = "auto"; 
}

@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz'); 
* { 
margin: 0; 
padding: 0 
 
	} 
	#container { 
	float: left; 
	width: 40%; 
} 
 
#wrap { 
	background-color: #c9c9c9; 
height: 100vh; 
} 
#add-button-container { 
	display: inline-grid; 
	margin-top: 2%; 
} 
#add-form { 
	background-color: #4C4C4C; 
	width: 50%; 
	height: 300px; 
	border-radius: 4px; 
} 
#add-form-container { 
	display: flow-root; 
} 
#add-form-block { 
	display: flex; 
	justify-content: center; 
	margin-top: 5%; 
} 
#input { 
  display: block; 
  font-size: 1.2em; 
  padding: 0.25em; 
width: 88%; 
  margin-bottom: 0.6em; 
  border-radius: 3px; 
  border: 1px solid #BABABA; 
} 
label { 
	color: white; 
	display: inline-block; 
	margin-right: 2%; 
	font-family: 'PT Sans Narrow', sans-serif; 
	font-size: 1.15em; 
} 
#pos-input { 
margin: 5% 0 0 5%; 
} 
#input-textarea { 
	margin-bottom: 1em; 
	display: block; 
} 
#input-submit { 
	cursor: pointer; 
} 
.title-input { 
	font-size: 1.2em; 
	color: white; 
	font-family: 'Yanone Kaffeesatz', sans-serif; 
	text-align: left; 
} 
 
#result { 
	display: flex; 
 
justify-content: center; 
} 
.block-btn { 
	display: ruby; 
} 
.edit::after { 
	  content:"\f14b"; 
   font-family: "FontAwesome"; 
   font-size: 2em; 
   color: white; 
} 
.edit { 
	   background: none; 
margin-left: 2%; 
border: none; 
cursor: pointer; 
} 
#change-input { 
margin-right: 2%; 
padding: 0.25em; 
margin-bottom: 0.6em; 
border-radius: 3px; 
border: 1px solid #BABABA; 
width: 30%; 
} 
#change-title { 
font-family:Arial, Helvetica, sans-serif; 
font-size: 16px; 
border-radius:4px; 
padding-left:5px; 
padding-right:5px; 
padding-top:3px; 
padding-bottom:3px; 
color:#ffffff; 
background-color:#cc6666; 
outline:none; 
border:none; 
cursor:pointer; 
display:inline-block; 
} 
 
#change-title:hover { 
color:#ffffff; 
background-color:#d41e1e; 
}  
.edit-block { 
	display: none; 
}

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Генераторы CSS | Rapprogtrain</title> 
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/> 
<meta name="description" content="rapprogtrain-это сайт по изучению программирования"> 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/> 
 <link href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700" rel="stylesheet">   
  <script src="app.js"></script> 
</head> 
<body> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<section> 
<div id="container"> 
<div id="wrap"> 
	<div class="title"> 
		<span>Добавить поле</span> 
	</div> 
	<div id="add-button-container"> 
<button id="add-input" onclick=" addInput(); increaseHeight();">Добавить input</button> 
</div> 
	 <div class="codes-wrapper"> 
    <div id="title-res-block2"> 
      <h3 class="third">CSS Код</h3> 
    <button class="clipboard" data-clipboard-target="#codes">Копировать код</button></div> 
    <div class="codes" id="codes"> 
      <p class="line1">&lt;div id='add-form'&gt;</p> 
      <p class="line2">&lt;div id='pos-input'&gt;</p> 
      <p class="code"></p> 
    </div> 
  </div> 
</div>  
</div> 
 
<div id="add-form-container"> 
<div id="add-form-block"> 
<div id="add-form"> 
	<div id="pos-input"> 
	</div> 
	</div> 
 
	</div> 
</div> 
	</section> 
</body> 
</html>