How to use onclick to display/hide menu

See more:

Javascript

CSS

HTML

please i want someone to help me fix my code, i am trying to show a hided menu with onclick function and as well show the same menu with onclick,but my problem is that when i click the menu will show but will not hide on the next click.

What I have tried:



<pre lang="HTML">
<div id = "toggle" onclick = "toggle()"><a href = "#">
<div class = "toggle" onclick = "toggle()"></div>
<div class = "toggle" onclick = "toggle()"></div>
<div class = "toggle" onclick = "toggle()"></div></a>
</div>

<div id = "tutorials-header-list">
<ul id = "menu">
<li id = "list-1001"><a href="#">Home</a></li>
<li id = "list-1002"><a href="#">About-us</a></li>
<li id = "list-1003"><a href="#">Library</a></li>
<li id = "list-1004"><a href="#">grammar-rule</a></li>
<li id = "list-1005"><a href="#">Online-Calculators</a></li>

</ul>

</div>


</pre>




#tutorials-header-list ul li{
float:left;
margin-right:40px;
display:inline-block;
position:relative;
bottom:0px;
height:50px;
width:100%;
text-align:left;
line-height:40px;
text-transform:uppercase;
box-shadow:0px 0px 0px 0px;
}

#menu{
display:none;
}



var el = document.getElementById('menu');
function toggle(){

if (el.style.display == 'none') {
el.style.display = 'block';

}else{
el.style.display = 'none';

}


}