Basic jQuery Accordion Slider Plugin - Handy Accordion

File Size: 19.5 KB
Views Total: 2459
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="js/jquery.handyAccordion.min.js"></script>

2. Include the jQuery easing plugin for easing options.

<script src="http:/"></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>
      <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>
      <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>

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

minWidth:150, // min width (px)

method:'mouseover', // 'mouseover' or 'click'
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.