Simple fast accordion

with JQ and CSS3

by Plippie Plop

HTML

<div class="accordion">
    <a href="#" class="active">Title 1</a>
    <div class="active"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p></div>    
    <a href="#">Title 2</a>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p></div>    
    <a href="#">Title 3</a>
    <div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p></div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen);

* {-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
body{
    font-size:14px;
   font-family: 'Oxygen', sans-serif;
    font-weight:400;
}
.accordion{
    border:2px solid #555;
    border-radius:6px;
    margin:1em;
}
.accordion a {
   font-size:16px;
    position:relative;
    display:block; 
    padding:4px 8px;
    line-height:40px;
    background:#afafaf;
    color:#222;
    text-decoration:none;
    border-bottom:1px solid #555;
    
}
.accordion a:last-child{
    border-bottom:0;
    background:red;
}

.accordion a.active {
    background:#efefef;
 }

.accordion div{
    max-height:0px;
    overflow:hidden;
    display:block;  
    transition:  .1s ease-out;
    -moz-transition: .5s ease-out;
    -ms-transition:  .5s ease-out;
    -o-transition:  .5s ease-out;
    -webkit-transition: .5s ease-out;

}
.accordion div.active{    
    max-height:999px;
        transition:  1s ease-in;
    -moz-transition: 1s ease-in;
    -ms-transition:  1s ease-in;
    -o-transition:  1s ease-in;
    -webkit-transition: 1s ease-in;
  
}
.accordion div p{
    padding:1em;
}


/* arrow */
.accordion a:after{
    content:'';
    position:absolute;
    top:18px;
    right:10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 10px 0 10px;
border-color: #dedede transparent transparent transparent;
    
transition-duration: 0.8s;
transition-property: transform;    
 -webkit-transition-duration: 0.8s;
-webkit-transition-property: transform;  
    
}
.accordion a.active:after{
 transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}

JavaScript

$(document).ready(function(){

    
    $('.accordion').on('click', 'a',function(e) {
        e.preventDefault();  
      $(this).parent().find('.active').removeClass('active');
      $(this).addClass('active').next().addClass('active');
       
    });
 
});