accordion.init(5,1,"ul.menu","slow"):- 5: opened section index (numeric)
- 1: autohide (bool)
- "ul.menu": container element
- "slow": speed
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<script type="text/javascript">
$(document).ready(function(){accordion.init(5,1,"ul.menu","slow")});
</script>
</head>
<body>
<ul class="menu">
<li rel="category">
<h3 rel="title">parent</h3>
<ul level="0">
<li rel="category">
<h3 rel="title">category 1</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
<li class="sub_items"><a href="#">link 3</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
</ul>
</li>
<li rel="category">
<h3 rel="title">parent</h3>
<ul level="0">
<li rel="category">
<h3 rel="title">category 1</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
<li class="sub_items"><a href="#">link 3</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">parent</h3>
<ul level="1">
<li rel="category">
<h3 rel="title">category 1</h3>
<ul level="2">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
<li class="sub_items"><a href="#">link 3</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="2">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="2">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
</ul>
</li>
<li rel="category">
<h3 rel="title">category 2</h3>
<ul level="1">
<li class="sub_items"><a href="#">link 1</a></li>
<li class="sub_items"><a href="#">link 2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<span id="navid" style="display:none">category 1</span>
</body>
</html>
Javascript
$.fn.equals = function(compareTo) {
if (!compareTo||!compareTo.length||this.length!=compareTo.length){return false}
for(var i=0;i
}
var menu = function accordion(l,h,c,s){
var accordion = {
init : function(){
this.autohide=h;
this.speed=s;
this.parents=[];
this.container=$(c);
this.focus=$("#navid");
this.initMenu(l)},
categories : function(){return this.getH3(this.getLi(this.container))},
getLi : function(e){return $(e).find("li[rel=category]")},
getH3 : function(e){return $(e).find("h3[rel=title]")},
close : function(e){$(e).find("h3:first").addClass("close")},
findParents: function(p){
var c=this.container,a=this.parents;
$.each(p.parents("ul"),function(){
if($(this).equals(c)){return}
else {a.push($(this))}})
return a},
up : function(p,e,h){
var u=p.find("ul");
h?u.hide():u.slideUp(this.speed);
this.getH3(p).removeClass("close")},
down : function(p,e){
var b=$.browser.msie&&$.browser.version=='7.0',
o=this.findParents(p),
s=this.speed,
u=p.parent().find("ul[level="+e.attr("level")+"]"),
h=$.grep(u,function(a){return a!=e[0]});
b?e.show(s):e.slideDown(s);
if(this.autohide)$.each(h,function(){accordion.up($(this).parent())});
this.close(p);
$.each(o, function(){
accordion.close($(this).parent());
b?$(this).show(s):$(this).slideDown(s)})},
anime : function(t,e,h){this[t](e.parent(),e,h)},
setFocus : function(i) {
var f=this.focus,t=f.text();
if(f.length>0){$.each(this.categories(),function(k,v){if($(v).text()==t)i=k})}
return i},
initMenu : function(i,init){
var p,e=this.container.find("ul");
if(i==-1)this.setEvents(e);
if(init){e=$(e[i]);e.is(':visible')?this.anime("up",e):this.anime("down",e)}
else{this.setEvents(e);i=this.setFocus(i);this.anime("down",$(e[i]))}},
setEvents : function(e){
var h=this.categories();
h.bind("click",function(e){accordion.initMenu(h.index($(e.target)),1);});
this.anime("up",e,1)}
}
return accordion.init();
}