Basic jQuery Accordion Slider Plugin - Handy Accordion

Handy Accordion is a lightweight jQuery plugin to create a horizontal accordion slider that allows to expand/collapse slides on mouse hover or click.

How to use it:

1. Include jQuery library and the jQuery handy accordion plugin in the html page.

<link rel="stylesheet" href="css/jquery.handyAccordion.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery.handyAccordion.min.js"></script>

2. Include the jQuery easing plugin for easing options.

<script src="http:/cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. The markup structure.

<div id="example">
  <ul class="handy_slide">
    <li class="on">
      <div> <a href="#"> <img src="img1_off.gif" width="150" height="450" class="img_off" alt=""> <img src="img1_on.gif" width="550" height="450" class="img_on" alt=""> </a> </div>
    </li>
    <li>
      <div> <a href="#"> <img src="img2_off.gif" width="150" height="450" class="img_off" alt=""> <img src="img2_on.gif" width="550" height="450" class="img_on" alt=""> </a> </div>
    </li>
    <li>
      <div> <a href="#"> <img src="img3_off.gif" width="150" height="450" class="img_off" alt=""> <img src="img3_on.gif" width="550" height="450" class="img_on" alt=""> </a> </div>
    </li>
  </ul>
</div>

4. Call the plugin with customization options on the parent element.

$(function(){
$("#example").handyAccordion({
minWidth:150, // min width (px)
duration:333,

scr:'.handy_slide',
scrWidth:1000,
maxWidth:550,
method:'mouseover', // 'mouseover' or 'click'
autoplay:true, 
timeout:4000, 
loop:true, 
fade:true, 
easing:'easeOutQuint' // easing options
});
});

---

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