Installation
Install with Bower: bower install dcjqaccordion.
Overview
The plugin takes standard html nested lists and turns them into vertical accordion menus.
Some features include:
- Ability to handle any number of levels
- Select either “click” or “hover” event
- State saving using cookies
- Set sub-menus to auto-expand on page load based on CSS class
- Allow all sub-menus to be expanded or auto-close open sub-menus
- Disable parent links
- Add count of number of child links
- Uses the jquery cookie plugin by Klaus Hartl for saving the menu state and the hoverIntent plugin by Brian Cherne if the “hover” event is selected.
Quick Start
1. Create a HTML Nested List
<ul id="accordion" class="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Products</a>
<ul>
<li>
<a href="#">Mobile Phones & Accessories</a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
<li>
<a href="#">Desktop</a>
<ul>
<li><a href="#">Product 4</a></li>
<li><a href="#">Product 5</a></li>
<li><a href="#">Product 6</a></li>
<li><a href="#">Product 7</a></li>
<li><a href="#">Product 8</a></li>
<li><a href="#">Product 9</a></li>
</ul>
</li>
<li>
<a href="#">Laptop</a>
<ul>
<li><a href="#">Product 10</a></li>
<li><a href="#">Product 11</a></li>
<li><a href="#">Product 12</a></li>
<li><a href="#">Product 13</a></li>
</ul>
</li>
<li>
<a href="#">Accessories</a>
<ul>
<li><a href="#">Product 14</a></li>
<li><a href="#">Product 15</a></li>
</ul>
</li>
<li><a href="#">Software</a>
<ul>
<li><a href="#">Product 16</a></li>
<li><a href="#">Product 17</a></li>
<li><a href="#">Product 18</a></li>
<li><a href="#">Product 19</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">Sale</a>
<ul>
<li><a href="#">Special Offers</a>
<ul>
<li><a href="#">Offer 1</a></li>
<li><a href="#">Offer 2</a></li>
<li><a href="#">Offer 3</a></li>
</ul>
</li>
<li>
<a href="#">Reduced Price</a>
<ul>
<li><a href="#">Offer 4</a></li>
<li><a href="#">Offer 5</a></li>
<li><a href="#">Offer 6</a></li>
<li><a href="#">Offer 7</a></li>
</ul>
</li>
<li>
<a href="#">Clearance Items</a>
<ul>
<li><a href="#">Offer 9</a></li>
</ul>
</li>
<li class="menu-item-129">
<a href="#">Ex-Stock</a>
<ul>
<li><a href="#">Offer 10</a></li>
<li><a href="#">Offer 11</a></li>
<li><a href="#">Offer 12</a></li>
<li><a href="#">Offer 13</a></li>
</ul>
</li>
<li>
<a href="#">About Us</a>
<ul>
<li><a href="#">About Page 1</a></li>
<li><a href="#">About Page 2</a></li>
</ul>
</li>
<li>
<a href="#">Services</a>
<ul>
<li>
<a href="#">Service 1</a>
<ul>
<li><a href="#">Service Detail A</a></li>
<li><a href="#">Service Detail B</a></li>
</ul>
</li>
<li>
<a href="#">Service 2</a>
<ul>
<li><a href="#">Service Detail C</a></li>
</ul>
</li>
<li>
<a href="#">Service 3</a>
<ul>
<li><a href="#">Service Detail D</a></li>
<li><a href="#">Service Detail E</a></li>
<li><a href="#">Service Detail F</a></li>
</ul>
</li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#">Contact us</a></li>
</ul>
2. Include The jQuery Vertical Accordion Menu Plugin
Add the jQuery plugin to the head of your document – also add the cookie plugin and hoverIntent plugin if required:
<script type='text/javascript' src='js/jquery.cookie.js'></script>
<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript' src='js/jquery.dcjqaccordion.2.7.min.js'></script>
3. Vertical Accordion CSS
The plugin doesn’t require any essential CSS styling in order to create the vertical accordion effect and will create the menu from any standard list. One benefit of this is that in the event that the users browser does not have javascript enabled the menu will still be available.
See the jQuery vertical accordion menu examples page for samples skins.
4. Initialise The Vertical Accordion Menu
The menu can be quickly and easily initialised using the default options by adding the following code to the head of your document:
jQuery(document).ready(function($) {
jQuery('#accordion').dcAccordion();
});
For more information on changing the menu settings refer to the Options page.
Options
Plugin Defaults
The jQuery vertical accordion menu plugin defaults are:
$.fn.dcAccordion = function(options) {
//set default options
var defaults = {
classParent : 'dcjq-parent', //Class of parent menu item
classActive : 'active', // Class of active parent link
classArrow : 'dcjq-icon', // Class of span tag for parent arrows
classCount : 'dcjq-count', // Class of span tag containing count (if addCount: true)
classExpand : 'dcjq-current-parent', // Class of parent li tag for auto-expand option
eventType : 'click', // Event for activating menu - options are "click" or "hover"
hoverDelay : 300, // Hover delay for hoverIntent plugin
menuClose : true, // If set "true" with event "hover" menu will close fully when mouseout
autoClose : true, // If set to "true" only one sub-menu open at any time
autoExpand : false, // If set to "true" all sub-menus of parent tags with class 'classExpand' will expand on page load
speed : 'slow', // Speed of animation
saveState : true, // Save menu state using cookies
disableLink : true, // Disable all links of parent items
showCount : true, // If "true" will add a count of the number of links under each parent menu item
cookie : 'dcjq-accordion' // Sets the cookie name for saving menu state - each menu instance on a single page requires a unique cookie name.
};
Overiding Default Options
All of the default options can be overidden by passing an object into the Vertical Accordion Menu method upon initialisation – e.g:
$('#accordion').dcAccordion({
eventType : 'hover',
hoverDelay : 600,
menuClose : false,
autoClose : false,
autoExpand : true,
classExpand : 'parent-item',
speed : 'fast',
cookie : 'my-cookie'
});