title: Toggle CSS animation with JQuery using toggleClass
body: <p>I want to toggle a dropdown, animate down on click and then back up on another click. It's animating down but not back up. It's just disappearing.</p>
  
  <p>Here's my codepen:</p>
  
  <p><a href="http://codepen.io/omarel/pen/YZPyOg" rel="nofollow noreferrer">http://codepen.io/omarel/pen/YZPyOg</a></p>
  
  <p>JQUERY</p>
  
  <pre><code>$(".openNav").click(function() {
      $('.navdropdown').toggleClass("slidenavdown");
  }); 
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="javascript:;" class="openNav"&gt;open&lt;/a&gt;
  
  &lt;div class="navdropdown"&gt;
            &lt;div class="holdcenter"&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="#buildingcontainer"&gt;hello&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.openNav {
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000
  }
  
  .navdropdown  {
          position: fixed;
          top:-100%;
          width:100%;
          height:100vh;
          background-color: #000;
          z-index:5;
      }
      .navdropdown .holdcenter {
          position: relative;
          display: flex;
      justify-content: center;
      align-items: center;
          height: 100%; 
          overflow-y: auto;
      }
      .navdropdown ul &gt; li {
          display: block;
          position: relative;
          text-align: center;
          font-size:38px;
          letter-spacing: 9.5px;
          margin:27px auto;
      }
      .navdropdown.on  {
          height:100vh;
      }
  
          .slidenavdown {
            -webkit-animation: slidenavdown; 
            -moz-animation: slidenavdown; 
            -o-animation: slidenavdown; 
            animation:slidenavdown;
          }
          .slidenavdown {
              animation-iteration-count: 1;
            -webkit-animation-iteration-count: 1;
            animation-fill-mode: both;
            -webkit-animation-fill-mode: both;
          }
          .x  {
            -webkit-animation-direction: alternate-reverse;
          animation-direction: alternate-reverse; 
          }
  
  
      /* --- DELAYS --- */
  
          .x {
            -webkit-animation-delay: .2s; 
          animation-delay:  .2s;
          }
  
      /* --- SPEED --- */
  
          .slidenavdown {
                  -webkit-animation-duration: 0.8s; 
              animation-duration: 0.8s;
              }
  
  
      /* --- EASING --- */
  
          .slidenavdown  { 
          -webkit-animation-timing-function: cubic-bezier(.86,.03,.53,1.01);
          animation-timing-function: cubic-bezier(.86,.03,.53,1.01);
          }
  
      /* --- TRANSITIONS --- */
  
          .x {
              -o-transition: .5s;
          -ms-transition: .5s;
          -moz-transition: .5s;
          -webkit-transition: .5s;
          transition: .5s;
          }
  
      /* --- KEYFRAMES --- */
  
          @keyframes slidenavdown {
            0% {
              top:-100%;
            }
            100% {
              top:0px;
            }
          }
  </code></pre>