jQuery Accordion Plugin with Amazing CSS3 Animations - ChechuAccordion

ChechuAccordion is a jQuery/Zepto accordion plugin that allows you to expand a content panel with amazing CSS3 @keyframes animations like rotate, slideUp or slideDown.

Basic Usage:

1. Include the jQuery library or Zepto library at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

2. Include the jQuery ChechuAccordion plugin after jQuery/Zepto library.

<script src="min/ChechuAccordion.min.js"></script>

3. Create the Html for an accordion interface.

<div id="demo">

<div class="accordion">
<h2>Title 1 <span>+</span></h2>
<div class="content">
Content 1
</div>
</div>

<div class="accordion">
<h2>Title 2 <span>+</span></h2>
<div class="content">
Content 2
</div>
</div>

<div class="accordion">
<h2>Title 3 <span>+</span></h2>
<div class="content">
Content 3
</div>
</div>

</div>
</div>

4. The CSS to style the accordion and use CSS3 @keyframes to create animations.

h2 {
...
}
h2 span {
float: right
}
.animSpanPlus {
transform: rotate(30deg)
-webkit-transform: rotate(30deg)
}
.content {
...
}
.loader {
background: url("../img/loader.gif") no-repeat center center
}
@keyframes slideDown {
0% {
opacity:0;
transform:translateY(150px)
}
100% {
opacity:1;
transform:translateY(0)
}
}
@keyframes slideUp {
0% {
opacity:0;
transform:translateY(-150px)
}
100% {
opacity:1;
transform:translateY(0)
}
}
@keyframes rotate {
0% {
opacity:0;
transform:rotate(0)
}
100% {
opacity:1;
transform:rotate(360deg)
}
}
@-webkit-keyframes slideDown {
0% {
opacity:0;
-webkit-transform:translateY(150px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-webkit-keyframes slideUp {
0% {
opacity:0;
-webkit-transform:translateY(-150px)
}
100% {
opacity:1;
-webkit-transform:translateY(0)
}
}
@-webkit-keyframes rotate {
0% {
opacity:0;
-webkit-transform:rotate(0)
}
100% {
opacity:1;
-webkit-transform:rotate(360deg)
}
}
@-moz-keyframes slideDown {
0% {
opacity:0;
-moz-transform:translateY(150px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
@-moz-keyframes slideUp {
0% {
opacity:0;
-moz-transform:translateY(-150px)
}
100% {
opacity:1;
-moz-transform:translateY(0)
}
}
@-moz-keyframes rotate {
0% {
opacity:0;
-moz-transform:rotate(0)
}
100% {
opacity:1;
-moz-transform:rotate(360deg)
}
}

3. Call the plugin with customization options.

<script>
$(document).ready(function() {
$('#demo').ChechuAccordion({
effect: 'slideDown', // slideUp, slideDown,rotate
slideTime: 1.0,      // time in seconds
hideAllPanels: true, // true or false
loaderImg: true      // true or false
});
);
</script>

---

This awesome jQuery plugin is developed by chechucastro. For more Advanced Usages, please check the demo page or visit the official website.