CSS Anitmate hidden content - BROKEN

CSS Anitmate hidden content - BROKEN

by Nirvanachain

HTML

<a href="#" class="js-link">Click Here</a>

<div class="js-content sr-only">
    <p>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</p>
</div>

CSS

.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;
}

JavaScript

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');
    }
});