Show and Hide Javascript HTML5

Question

So, I'm doing my designer-portfolio in html and I wanted to have a menu that only shows when this character is pressed...

But I'm new on programming and my codes are very simple, so I'm using this:

 function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'hidden') e.style.visibility = 'visible'; else e.style.visibility = 'hidden'; } function untoggle_visibility(id) { var e = document.getElementById(id); if(e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; }

 <div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');">openmenu</div> <div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu'); onclick=untoggle_visibility('closemenu');">closemenu</div> <div id="menu" style="visibility: hidden;">...</div>

The problem is it only works once...

When I click on #openmenu it shows the #menu and the #closemenu , and when I click on #closemenu it hiddes the #menu and the #closemenu .

BUT it only works once, so if I press #openmenu after #closemenu , it won't work...

Answer 1

Your code is wrong.

onclick="toggle_visibility('menu'); onclick=toggle_visibility('closemenu');"

So what happens with the above code is it runs once. And when it runs it reassigns onclick because you have onclick=functionCall

So after it runs you basically have <div onclick=undefined> because the function did not run.

 function toggle_visibility(id) { var e = document.getElementById(id); if (e.style.visibility == 'hidden') e.style.visibility = 'visible'; else e.style.visibility = 'hidden'; } function untoggle_visibility(id) { var e = document.getElementById(id); if (e.style.visibility == 'visible') e.style.visibility = 'hidden'; else e.style.visibility = 'visible'; }

 <div id="openmenu" style="visibility: visible;" onclick="toggle_visibility('menu');toggle_visibility('closemenu');">openmenu</div> <div id="closemenu" style="visibility: hidden;" onclick="untoggle_visibility('menu');untoggle_visibility('closemenu');">closemenu</div> <div id="menu" style="visibility: hidden;">...</div>

How would most people code it? By toggling a class.

 function toggle_visibility(ids) { ids.forEach( function (id) { var elem = document.getElementById(id); elem.classList.toggle('visibilityHidden') }) }

 .visibilityHidden { visibility: hidden; } /* use hidden if you do not want it to take up space */ .hidden { display: none; }

 <div id="openmenu" onclick="toggle_visibility(['menu','openmenu','closemenu']);">openmenu</div> <div id="closemenu" class="visibilityHidden" onclick="toggle_visibility(['menu','openmenu','closemenu']);">closemenu</div> <div id="menu" class="visibilityHidden">...</div>

Most developers would not use inline event handlers either, but that is a different question.