title: CSS Animation to hide and show content like an accordion
body: <p>I am trying to make content that is visually hidden slide open when a link is clicked.</p>
  
  <p>I have a keyframe animation that I am using to try and set the height from 0px to 100%.  The first click removes the <code>.sr-only</code> class and adds the <code>.open</code> class which should run the keyframe animation.  I am not sure why the keyframe animation is not working.  </p>
  
  <p>Here is a fiddle to my code so far:  <a href="http://jsfiddle.net/JkaAL/" rel="nofollow">http://jsfiddle.net/JkaAL/</a></p>
  
  <p>Here is the code:  Please note I am just using the -webkit- prefix and testing in just chrome.</p>
  
  <p>HTML:  </p>
  
  <pre><code>&lt;a href="#" class="js-link"&gt;Click Here&lt;/a&gt;
  
  &lt;div class="js-content sr-only"&gt;
      &lt;p&gt;Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      border: 0;
  }
  
  @-webkit-keyframes openIt {
      0% { height: 1px; }
      100% { height: 100%; }
  }
  
  .open {
      position: static;
      width: auto;
      padding: initial;
      margin: initial;
      overflow: visible;
      clip: auto;
      border: 0;
      -webkit-animation: openIt 2s linear;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var $link = $('.js-link'),
      $content = $('.js-content');
  
  $link.click(function(e) {
      e.preventDefault();
  
      if ( $content.hasClass('sr-only') ) {
          $content.removeClass('sr-only').addClass('open');
      }
      else if ( $content.hasClass('open') ) {
          $content.removeClass('open').addClass('sr-only');
      }
  });
  </code></pre>