title: Hiding an element on all site pages
body: <p>I've developed a couple of alert boxes that display on all site pages. </p>
  
  <p><a href="https://i.stack.imgur.com/hWShr.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/hWShr.gif" alt="screenshot of alert boxes"></a></p>
  
  <p>The user is able to close each box separately:</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>$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
      $("#alert-box-news").hide(800);
    });
    $("#close-alert-box-maintenance").click(function() {
      $("#alert-box-maintenance").hide(800);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alert-box {
    width: 50vw;
    position: relative;
    margin: 20px auto;
    border: 1px solid black;
  }
  .alert-box-close {
    position: absolute;
    top: -12px;
    right: -12px;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;
  &lt;/script&gt;
  
  &lt;article class="alert-box" id="alert-box-news"&gt;
    &lt;h1&gt;News Alerts&lt;/h1&gt;
    &lt;p&gt;text text text text text text text text text text text text text text&lt;/p&gt;
    &lt;a class="alert-box-close" id="close-alert-box-news"&gt;
      &lt;img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""&gt;
    &lt;/a&gt;
  &lt;/article&gt;
  
  &lt;article class="alert-box" id="alert-box-maintenance"&gt;
    &lt;h1&gt;Site Maintenance&lt;/h1&gt;
    &lt;p&gt;text text text text text text text text text text text text text text&lt;/p&gt;
    &lt;a class="alert-box-close" id="close-alert-box-maintenance"&gt;
      &lt;img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""&gt;
    &lt;/a&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <h2><a href="https://jsfiddle.net/eath6oyy/" rel="noreferrer">jsFiddle</a></h2>
  
  <p>Now I need to make sure that the box the user closes (could be one, could be both), doesn't re-appear as he/she browses the site, or reloads a page.</p>
  
  <p>I'm thinking I could set a PHP cookie to expire in 24 hours. But most of the related posts on this site recommend a JavaScript cookie. Unfortunately, my efforts to implement a JavaScript solution haven't worked (the boxes re-appear after being closed). I've tried various methods, as outlined here:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/q/24175873/3597276">Set cookie to hide div when button is clicked</a></li>
  <li><a href="https://stackoverflow.com/q/32207633/3597276">Set cookie when my div is hidden</a></li>
  <li><a href="https://stackoverflow.com/q/21587098/3597276">jQuery Cookie hide/show div</a></li>
  <li><a href="https://stackoverflow.com/q/10674611/3597276">Hide div 24hr cookie javascript?</a></li>
  </ul>
  
  <p>What would be a simple method to hide each box, sitewide, for 24 hours?</p>
  
  <p>I'm open to jQuery, plain JavaScript, PHP, cookies, sessions or something else.</p>