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:

```js
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";
}
```

```html
<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;">

```