Styjun

I have this CSS transition effect menu that is activated with a Javascript function through the click event on a button. However, I need the same button to hide the menu if it is visible.

I tried doing this by getting the same property that is changed by the function, as follows:

if (menu01.style.maxHeight == '0px')
menu01.style.maxHeight = '600px';
else
menu01.style.maxHeight = '0px';

However, as it may seem perfectly logical, IT DOES NOT WORK, and in addition it locks the function.
A GLOBAL variable could solve the problem, but they say we should avoid globals because of security.

<style type="text/css">
#menu01
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;

</style>

<div id="menu01">
<a href="" title="Alterar Dados">Meus Dados</a><hr>
<a href="" title="Alterar Senha">Alterar Senha</a><hr>
<a href="" title="Alterar Senha">Agenda</a><hr>
<a href="" title="Alterar Senha">Calendario</a><hr>
<a href="" title="Alterar Senha">Sair</a>
</div>

<button onclick="showmenu()">Menu(show/hide)</button>

<script type="text/javascript">
function showmenu()
 var menu01 = document.getElementById('menu01');
 menu01.style.maxHeight = '600px';

</script>

I need a solution in Javascript Vanilla. I do not use jQuery.

Its very simple, since you are adding 600px max height property, on button click add logic to check height and toggle it between 0px and 600px.

checkout the snippet

function showmenu()
 var menu01 = document.getElementById('menu01');
 menu01.style.maxHeight = menu01.style.maxHeight == '600px' ? '0px': '600px';

#menu01
display: block;
position: absolute;
top:0px;
left: 130px;
width: 120px;
border-top: none;
background: white;
border-radius: 0px 0px 4px 4px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 2px 4px 0 rgba(0,0,0,0.1);
max-height: 0px;
overflow: hidden;
transition-property: max-height;
transition: all 1s ease-in-out;

<div id="menu01">
<a href="" title="Alterar Dados">Meus Dados</a><hr>
<a href="" title="Alterar Senha">Alterar Senha</a><hr>
<a href="" title="Alterar Senha">Agenda</a><hr>
<a href="" title="Alterar Senha">Calendario</a><hr>
<a href="" title="Alterar Senha">Sair</a>
</div>

<button onclick="showmenu()">Menu(show/hide)</button>

Proposing another methods based on Akhil Aravind's answer :)
Prefer using addEventListener for future use so you can use the function for another DOM elements.

<script type="text/javascript">
 var showMenuButton = document.getElementsByTagName('button')[0];
 var menu01 = document.getElementById('menu01');
 var elementArray = [showMenuButton, menu01];
 elementArray.forEach(function (element) 
 element.addEventListener('click', function () 
 showmenu(menu01);
 )
 )
 function showmenu(menuElement) 
 menuElement.style.maxHeight = menuElement.style.maxHeight == '600px' ? '0px': '600px';
 
 </script>

1. delete the onclick attached to 'button' element


2. get the get the Elements for the button and menu01


3. add event listener for each elements. (I tried Akhil Aravind's answer code, and when you click the list item, all the elements disappear. Maybe bug)


4. I just save the elements into an array and use for each to make it shorter(no need for writing twice)