<div class="graphite demo-container">
<ul class="accordion" id="accordion-1">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Mobile Phones</a>
<ul>
<li><a href="#">Product 1</a>
<ul>
<li><a href="#">Part A</a></li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</li>
<li><a href="#">Product 2</a>
<ul>
<li><a href="#">Part A</a></li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</li>
<li><a href="#">Product 3</a>
<ul>
<li><a href="#">Part A</a></li>
<li><a href="#">Part B</a></li>
<li><a href="#">Part C</a></li>
<li><a href="#">Part D</a></li>
</ul>
</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>
<ul>
<li><a href="#">Part E</a></li>
<li><a href="#">Part F</a></li>
<li><a href="#">Part G</a></li>
<li><a href="#">Part H</a></li>
</ul>
</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="#">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>

ul {padding: 0; list-style: none;}
.wrap {width: 960px; margin: 0 auto;}
.demo-container {padding: 0; float: left; width: 200px;}
.demo-container h4 {font-size: 12px; margin: 0 0 5px 0;}
.clear {clear: both;}
.text {margin-bottom: 1em; line-height: 1.5em;}
.dcjq-count {float: right;}

.graphite .accordion{font: bold 14px Arial, sans-serif; border-top: 1px solid #111; border-right: 1px solid #111; border-left: 1px solid #111;}
.graphite .accordion, .graphite .accordion li {margin: 0; padding: 0; border: none;}
.graphite .accordion a {padding: 5px 10px 5px 50px; background: #0C0C0C url(/images/bg_black.png) repeat-x 0 -1px; text-decoration:none; display: block; color: #ddd; border-bottom: 1px solid #222; border-top: 1px solid #777; position: relative;}
.graphite .accordion ul a {background: #424549;}
.graphite .accordion a.dcjq-parent, .graphite .accordion a.dcjq-parent:hover {background: #0C0C0C url(/images/bg_black.png) repeat-x 0 -1px;}
.graphite .accordion a.dcjq-parent.active {}
.graphite .accordion a .dcjq-icon {position: absolute; top: 50%; left: 14px; width: 34px; margin-top: -17px; height: 27px; background: url(/images/arrow_black_right.png) no-repeat 0 center;}
.graphite .accordion a.dcjq-parent.active .dcjq-icon {background: url(/images/arrow_black_down.png) no-repeat 0 center;}
.graphite .accordion a:hover {background: #232323; color: #fff;}
.graphite .accordion a:active{}

/*
* DC jQuery Vertical Accordion Menu - jQuery vertical accordion menu plugin
* Copyright © 2011 Design Chemical
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
$.fn.dcAccordion = function(options) {
//set default options
var defaults = {
classParent : 'dcjq-parent',
classActive : 'active', classArrow : 'dcjq-icon', classCount : 'dcjq-count',
eventType : 'click',
hoverDelay : 300,
menuClose : true,
autoClose : true,
speed : 'slow',
saveState : true,
disableLink : true, showCount : true
};
//call in the default otions
var options = $.extend(defaults, options);
var $dcAccordionObj = this;
return $dcAccordionObj.each(function(options){
setUpAccordion();
if(defaults.saveState == true){
cookieId = $(this).parent().attr('id');
checkCookie();
}
resetAccordion();
if(defaults.eventType == 'hover'){
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
over: linkOver, // function = onMouseOver callback (REQUIRED)
timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
out: linkOut // function = onMouseOut callback (REQUIRED)
};
$('li a',$dcAccordionObj).hoverIntent(config);
var configMenu = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: 1000, // number = milliseconds for onMouseOver polling interval
over: menuOver, // function = onMouseOver callback (REQUIRED)
timeout: 1000, // number = milliseconds delay before onMouseOut
out: menuOut // function = onMouseOut callback (REQUIRED)
};
$($dcAccordionObj).hoverIntent(configMenu);
// Disable parent links
if(defaults.disableLink == true){
$('li a',$dcAccordionObj).click(function(e){
if($(this).next('ul').length >0){
e.preventDefault();
}
});
}
} else {
$('li a',$dcAccordionObj).click(function(e){
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Prevent browsing to link if has child links
if(defaults.disableLink == true){
if($(this).next('ul').length >0){
e.preventDefault();
}
}
// Auto close sibling menus
if(defaults.autoClose == true){
autoCloseAccordion($parentsLi, $parentsUl);
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
$('a',$activeLi).removeClass(defaults.classActive);
} else {
$(this).next().slideToggle(defaults.speed);
$('> a',$activeLi).addClass(defaults.classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
createCookie();
}
});
}
// Set up accordion
function setUpAccordion(){
$arrow = '<span class="'+defaults.classArrow+'"></span>';
$('> ul',$dcAccordionObj).show();
$('li',$dcAccordionObj).each(function(){
var classParentLi = defaults.classParent+'-li';
if($('> ul',this).length > 0){ $(this).addClass(classParentLi);
$('> a',this).addClass(defaults.classParent).append($arrow); if(defaults.showCount == true){ var parentLink = $('li:not(.'+defaults.classParent+') > a',this); var countParent = parseInt($(parentLink).length); getCount = countParent; $('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>'); }
}
});
$('> ul',$dcAccordionObj).hide();
}
});
function linkOver(){
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Auto close sibling menus
if(defaults.autoClose == true){
autoCloseAccordion($parentsLi, $parentsUl);
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
$('a',$activeLi).removeClass(defaults.classActive);
} else {
$(this).next().slideToggle(defaults.speed);
$('> a',$activeLi).addClass(defaults.classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
createCookie();
}
}
function linkOut(){
}
function menuOver(){
}
function menuOut(){
if(defaults.menuClose == true){
$('ul',$dcAccordionObj).slideUp(defaults.speed);
// Reset active links
$('a',$dcAccordionObj).removeClass(defaults.classActive);
createCookie();
}
}
// Auto-Close Open Menu Items
function autoCloseAccordion($parentsLi, $parentsUl){
$('ul',$dcAccordionObj).not($parentsUl).slideUp(defaults.speed);
// Reset active links
$('a',$dcAccordionObj).removeClass(defaults.classActive);
$('> a',$parentsLi).addClass(defaults.classActive);
}
// Retrieve cookie value and set active items
function checkCookie(){
var cookieVal = $.cookie(cookieId);
if(cookieVal != null){
// create array from cookie string
var activeArray = cookieVal.split(',');
$.each(activeArray, function(index,value){
var $cookieLi = $('li:eq('+value+')',$dcAccordionObj);
$('> a',$cookieLi).addClass(defaults.classActive);
var $parentsLi = $cookieLi.parents('li');
$('> a',$parentsLi).addClass(defaults.classActive);
});
}
}
// Reset accordion using active links
function resetAccordion(){
$('ul',$dcAccordionObj).hide();
$allActiveLi = $('a.'+defaults.classActive,$dcAccordionObj);
$allActiveLi.next().show();
}
// Write cookie
function createCookie(){
var activeIndex = [];
// Create array of active items index value
$('li a.active',$dcAccordionObj).each(function(i){
var $arrayItem = $(this).parent('li');
var itemIndex = $('li',$dcAccordionObj).index($arrayItem);
activeIndex.push(itemIndex);
});
// Store in cookie
$.cookie(cookieId, activeIndex, { path: '/' });
}
};
})(jQuery);