jQuery Accordion Plugin with Amazing CSS3 Animations - ChechuAccordion
File Size: | 85.7 KB |
---|---|
Views Total: | 754 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.