Problem showing/hiding UI elements in HTML

Question

I have written some HTML to display/hide some UI when buttons are clicked. I want the UI to be hidden when the page loads and revealed when the "Show UI" button is clicked.

The following HTML almost works:

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}

<div id="hideUI">
  <input id="showButton" type="button" onclick="showHide('hideUI', 'showUI');" value="Show UI" />
</div>

<div id="showUI">
  <input id="hideButton" type="button" onclick="showHide('showUI', 'hideUI');" value="Hide UI" />
  <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

However, the "showUI" div is visible when the page first displays. If I set the initial visibility to hidden in that div, it does not show up as expected when I click the "Show UI" button and attempt to make it visible.

<div id="showUI" style="visibility: hidden;">

Possible duplicate of [Show/hide 'div' using JavaScript](https://stackoverflow.com/questions/21070101/show-hide-div-using-javascript) — Adam, Jan 18 '19 at 20:05

score 1 · Answer 1 · answered Jan 18 '19 at 20:11

You just need to call the function once in the script. See in below code, I have called showHide('show', 'hideUI'); just after declaring the function.

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}
showHide('showUI', 'hideUI');

<div id="hideUI">
  <input id="showButton" type="button" onclick="showHide('hideUI', 'showUI');" value="Show UI" />
</div>

<div id="showUI">
  <input id="hideButton" type="button" onclick="showHide('showUI', 'hideUI');" value="Hide UI" />
  <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

score 0 · Answer 2 · answered Jan 18 '19 at 20:08

You need to execute showHide('hideUI', 'showUI'); when loading the page. The following Javascript should work:

function showHide(thingToHide, thingToShow) {
  document.getElementById("status").innerHTML = "Shown";
  if (thingToHide == "showUI") {
    document.getElementById("status").innerHTML = "Hidden";
  }
  document.getElementById(thingToHide).style.visibility = "hidden";
  document.getElementById(thingToShow).style.visibility = "visible";
}
showHide('hideUI', 'showUI');

score 0 · Answer 3 · answered Jan 18 '19 at 20:49

0

The problem with my original code is that the javascript function is BEFORE the divs. If I set the visibility of div showUI to hidden in the HTML and I move the javascript after the HTML for the divs it works as desired.

answered Jan 18 '19 at 20:49

jbww

735
2
12
27

score 0 · Answer 4 · answered Jan 18 '19 at 21:05

This might be what your looking for. It keeps the button in the same place.

HTML

<input id="Button" type="button" onclick="showHide('UI');" value="Show UI" />
<div id="UI" style="visibility: hidden">
    <p> Various UI goes here</p>
</div>
<p id="status">Start</p>

JS

function showHide(UI) {
  if (document.getElementById(UI).style.visibility === 'hidden') {
    document.getElementById("status").innerHTML = "Shown";
    document.getElementById(UI).style.visibility = "visible";
    document.getElementById('Button').value = 'Hide UI'
  } else {
    document.getElementById("status").innerHTML = "Hidden";
    document.getElementById(UI).style.visibility = "hidden";
    document.getElementById('Button').value = 'Show UI'
  }

Problem showing/hiding UI elements in HTML

4 Answers4