title: Reveal div by clicking button using JS
body: <p>I'm trying to create a function that reveals additional content by clicking a button.</p>
  <p>I've got a script that <strong>displays</strong> the content by default - How do I switch it so the content is <strong>hidden</strong> by default and only displays when the button is clicked?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function revealContent() {
    var x = document.getElementById("additionalContent");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-10 text-center"&gt;
    &lt;button class="btn btn-sm btn-primary" onclick="revealContent()"&gt;Show More Options...&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div class="col-10" id="additionalContent"&gt;
    &lt;p&gt;Content!&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>