title: Custom alert fadeIn but wont fadeOut
body: <p>I am trying to make my custom alert fade in and out. I am altering its visibility by adding and removing the class "show" to the toast-container div.It fades in fine however it fades out just momentarily before immediately reappearing again. Using inspect element it shows that it encountered this error:</p>
  
  <blockquote>
    <p>job-application-form.php:463 Uncaught TypeError: Cannot read property 'classList' of undefined
            at job-application-form.php:463</p>
  </blockquote>
  
  <p>which is at the function <code>setTimeout(function(){ cont.classList.remove("show")}, 3000);</code>and the "show" class was not removed from the div.</p>
  
  <p>I do not understand why I am getting this error or how to fix it. Please help.</p>
  
  <p>Div</p>
  
  <pre><code>&lt;div id="toast-container" class="toast-top-right"&gt;&lt;div  id="toast-type" class="toast" aria-live="assertive" style=""&gt;&lt;div id="snackbar"&gt;message&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Function:</p>
  
  <pre><code>&lt;script&gt; 
    function Toast(message, messagetype) 
    {
       var cont = document.getElementById("toast-container").classList.add("show");
       var type = document.getElementById("toast-type");
       type.className += " " + messagetype;
       var x = document.getElementById("snackbar");
           x.innerHTML = message;
       setTimeout(function(){ cont.classList.remove("show")}, 3000);
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Function call in php</p>
  
  <pre><code>$Toast = "We have &lt;strong&gt;successfully&lt;/strong&gt; received your message and will get back to you as soon as possible.";
          $Error = "toast-error";
          $Success = "toast-success";
          echo "&lt;script type='text/javascript'&gt;Toast('$Toast', '$Success');&lt;/script&gt;";
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#snackbar { 
    word-wrap: break-word;
  }
  
  #toast-container {
      visibility: hidden;
      position: fixed;
      z-index: 999999;
      -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
      animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }
  
  #toast-container.show {
      visibility: visible;
  }
  
  #toast-container * {
  
      -moz-box-sizing: border-box;
  
      -webkit-box-sizing: border-box;
  
      box-sizing: border-box;
  
  }
  
  .toast-top-right {
  
      top: 12px;
  
      right: 12px;
  
  }
  
  #toast-container &gt; div {
  
      position: relative;
  
      pointer-events: auto;
  
      overflow: hidden;
  
      margin: 0 0 6px;
  
      padding: 20px 25px;
  
      width: 300px;
  
      -moz-border-radius: 3px 3px 3px 3px;
  
      -webkit-border-radius: 3px 3px 3px 3px;
  
      border-radius: 3px 3px 3px 3px;
  
      background-repeat: no-repeat;
  
      -moz-box-shadow: 0 0 12px #999999;
  
      -webkit-box-shadow: 0 0 12px #999999;
  
      box-shadow: 0 0 12px #999999;
  
      color: #FFFFFF;
  
      opacity: 0.8;
  
      -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  
      filter: alpha(opacity=80);
  
  }
  
  .toast {
  
      background-color: #030303;
  
  }
  
  .toast-success {
  
      background-color: #51A351;
  
  }
  
  .toast-error {
  
      background-color: #BD362F;
  
  }
  
  @-webkit-keyframes fadein {
    from {bottom: 0; opacity: 0;} 
    to {bottom: 30px; opacity: 1;}
  }
  
  @keyframes fadein {
    from {bottom: 0; opacity: 0;}
    to {bottom: 30px; opacity: 1;}
  }
  
  @-webkit-keyframes fadeout {
    from {bottom: 30px; opacity: 1;} 
    to {bottom: 0; opacity: 0;}
  }
  
  @keyframes fadeout {
    from {bottom: 30px; opacity: 1;}
    to {bottom: 0; opacity: 0;}
  }
  </code></pre>