CODEWITHSUNDEEP
javascripthtml
Herdeir0
Herdeir0

Reputation: 21

Show and Hide Javascript HTML5

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...

Upvotes: 2

Views: 92

Answers (1)

epascarello
epascarello

Reputation: 207501

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.

Upvotes: 2

Related Questions