title: How can elements made invisible by display:none be made visible again with JavaScript?
body: <p>I have this HTML setup so that these elements will not display until a certain function gets run. The HTML by itself is fine...</p>
  
  <pre><code>&lt;div id="aftlogin"&gt;
      &lt;div id="priv1" style="display: none;"&gt;
          &lt;p&gt;Welcome there!&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="priv2" style="display: none;"&gt;
      &lt;/div&gt;
      &lt;div id="priv3" style="display: none;"&gt;
      &lt;/div&gt;
      &lt;div id="priv4" style="display: none;"&gt;
      &lt;/div&gt;
      &lt;div id="priv5" style="display: none;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>...It's the JavaScript the screws everything up: this JavaScript function is supposed to make those elements visible again. The elements that become visible depend on the value stored in the variable "role":
  <em>(I used block since visible is for the visible style, not the display style)</em></p>
  
  <pre><code>if (role == "priv1") {
      document.getElementById("priv1").style.display = "block";
  }
  if (role == "priv2") {
      document.getElementById("priv1").style.display = "block";
      document.getElementById("priv2").style.display = "block";
  }
  if (role == "priv3") {
      document.getElementById("priv1").style.display = "block";
      document.getElementById("priv2").style.display = "block";
      document.getElementById("priv3").style.display = "block";
  }
  if (role == "priv4") {
      document.getElementById("priv1").style.display = "block";
      document.getElementById("priv2").style.display = "block";
      document.getElementById("priv3").style.display = "block";
      document.getElementById("priv4").style.display = "block";
  }
  if (role == "priv5") {
      document.getElementById("priv1").style.display = "block";
      document.getElementById("priv2").style.display = "block";
      document.getElementById("priv3").style.display = "block";
      document.getElementById("priv4").style.display = "block";
      document.getElementById("priv5").style.display = "block";
  }
  </code></pre>
  
  <p>One way or another, the code doesn't work. If I don't comment it out, the entire function stops working, so it's hard to pinpoint exactly what the problem is. All the syntax is correct, so I have done something else that upset the JavaScript gods?</p>
  
  <p>Here is a jsFiddle demo: <a href="https://jsfiddle.net/9p9xx8sz/" rel="nofollow noreferrer">https://jsfiddle.net/9p9xx8sz/</a></p>