jQuery Lightweight Accordion Plugin - Zebra_Accordion

File Size: 50.1 KB
Views Total: 4444
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Lightweight Accordion Plugin - Zebra_Accordion

Zebra_Accordion is a lightweight, cross-browser and highly customizable jQuery accordion plugin which is useful for better organizing larger groups of content.

Features:

  • Highly customizable via CSS
  • All tabs may be expanded/collapsed
  • Tabs can expand on mouse hover
  • Automatically scrolling to fit the size of the browser’s window
  • Lightweight and easy to use

Installation:

# NPM
$ npm install zebra_accordion --save

# Bower
$ bower install zebra_accordion

You might also like:

Basic Usage:

1. Include jQuery library and Zebra_Accordion.js on your webpage

<script type="text/javascript" src="public/javascript/jquery-1.9.1.js"></script>
<script type="text/javascript" src="zebra_accordion.js"></script>

2. Include the Zebra_Accordion CSS on your webpage

<link rel="stylesheet" href="../public/css/zebra_accordion.css" type="text/css">

3. The HTML

<dl class="Zebra_Accordion" id="demo">
<dt>tab 1</dt>
<dd>...</dd>
<dt>tab 2</dt>
<dd>... </dd>
<dt>tab 3</dt>
<dd>... </dd>
<dt>tab 4</dt>
<dd>... </dd>
</dl>

5. Call the plugin.

$(document).ready(function() {

  new $.Zebra_Accordion('#demo');

});

4. Default options and callback events.

//  Should the content block's opacity be also animated?
animate_opacity:        true,                       

//  If set to TRUE, an open block can also be collapsed in this case, all blocks can be collapsed; 
// if set to FALSE, an open block can be collapsed only by opening another block - in this case, only a single block is open at any given moment;
collapsible:            false,                     

//  The name of the class to append to the "title" element when its associated content block is expanded.
//  Can be used for customizing the aspect of the opened tab to give better visual feedback to the users.
expanded_class:         'Zebra_Accordion_Expanded', 
                                          
//  The speed (in milliseconds) to use when collapsing content blocks.
hide_speed:             400,                        
                                     
//  If a content block's content is not entirely visible after it is expanded, the window will be scrolled so so that the entire content of the content block is visible (if it is possible).
// This value represents the speed (in milliseconds) to use for scrolling.
scroll_speed:           600,                        

//  The speed (in milliseconds) to use when expanding content blocks.
show_speed:             400,                        
                                        
// The index (0 based) of the content block to be expanded by default.
// The value of this property can also be boolean FALSE, indicating that all tabs should be collapsed by default.
// If the value of the "collapsible" property is TRUE, the value of this property can also be boolean TRUE, indicating that all tabs should be expanded by default, or an array with the indexes of tabs to be expanded by default.
show:                   0,                          
                                      
// Set this to TRUE if content blocks should be expanded when hovering their associated "titles".
// If "collapsible" is TRUE then this property will always be FALSE!
toggle_on_mouseover:    false,                      

// Event fired before a content block is collapsed.
// The callback function (if any) receives as arguments the closed item's number (0 based), the title element and the content block element.
onBeforeClose:          null,                       

// Event fired before a content block is expanded.
// The callback function (if any) receives as arguments the closed item's number (0 based), the title element and the content block element.                                
onBeforeOpen:           null,                       

// Event fired after a content block is collapsed.
// The callback function (if any) receives as arguments the closed item's number (0 based), the title element and the content block element.
onClose:                null,                       

// Event fired after a content block is expanded.
// The callback function (if any) receives as arguments the opened item's number (0 based), the title element and the content block element.
onOpen:                 null                        

Changelog:

v1.2.9 (2018-08-06)

  • Minor source code updates

v1.2.8 (2018-07-13)

  • JS update

v1.2.8 (2017-10-14)

  • fixed a bug where clicking on an already opened tab when the collapsible property is set to false would trigger the onBeforeClose event.
  • collapsible property can now also be 0 which works the same as when set to FALSE except that all tabs can be collapsed. 

v1.2.7 (2017-09-16)

  • performance improvements and source code tweaks
  • new folder structure

v1.2.2 (2013-11-29)

  • added 2 new events – onBeforeClose and onBeforeOpen

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