title: How to make a <div> disappear then reappear onclick
body: <p>I'm trying to make a FAQ section for my website but I can't seem to get this simple code to work, I've been stomped for hours, I'm trying to make a box disappear <code>onclick</code>, then reappear. I've gotten it to disappear but when I add in the reappear the whole thing breaks. Here's my code:</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 showDiv() {
    document.getElementById('FAQPage').style.display = "block";
  }
  
  function closeDiv() {
    document.getElementById('FAQPage').style.display = "none";
  }
  
  function showOrHide() {
    if (document.getElementById('FAQPage').style.display = "block") {
      closeDiv()
    } else {
      showDiv()
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#FAQPage {
    background-color: #F8F8F8;
    width: 50%;
    position: absolute;
    left: 41%;
    height: auto;
    top: 10%;
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="FAQSidebar-buttons" onclick="showOrHide()"&gt;
    &lt;h2 align="center"&gt;What kind of websites can we do?&lt;/h2&gt;
  &lt;/div&gt;
  
  &lt;div id="FAQPage"&gt;
    &lt;h1 align="center"&gt;What kind of websites can we do?&lt;/h1&gt;
    &lt;hr /&gt;
    &lt;p align="center"&gt;Here at The Castle, when it comes to web design we can do almost anything! We can do Ecommerce, mobile websites, personal websites, and much more! Here, no matter what kind of business you have, you can get a site for it.&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>