Hiding div on animation complete

http://stackoverflow.com/questions/19642314/reversing-a-css3-animation-on-click/

by TastyBytes

HTML

<div class="bar">
    <a href="#" class="click">Click Me</a>
    <div class="div shown">
        <p>Hello</p>
    </div>
</div>

CSS

a {
    color: white;
    text-align: center;
}

.bar {
    height: 20px;
    background: red;
}

.div {
    background: silver;
    padding: 10px;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0;
   
  }
  100% {
    opacity: 1;
    display: block;
  }
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

.hidden {
    -webkit-animation: fade 2s reverse;
    animation: fade 2s reverse;
    
    -webkit-transition: 0s all 2s;
    transition-delay: 0s all 2s;
    max-height: 0;
    padding: 0;
    
    overflow: hidden;
}

.shown {
    -webkit-animation: fade 2s;
    animation: fade 2s;
    max-height: 5000px;
}

JavaScript

$(function() {
    $div = $(".div");
    
    var menu = function () {
        if ( $div.hasClass("shown")) {
            $div.removeClass("shown");
            $div.addClass("hidden");
        } else {
            $div.removeClass("hidden");
            $div.addClass("shown");
        }
       
    }
    
    menu();
    
    
    $(".click").bind("click", menu);
    
});