I am very unexperienced with Javascript of Jquery or anyting similar, but have broad skills with HTML and CSS. I was asked to make something for a local church to house their MP3 files for their sermons. So I had the idea to do a multi-tied accordian, the top level being the year and having months collapse out of the selected year. I have the structure laid out basically how I want it, it just isn't collapsing at all. Any help would be great! Remember though, I don't have much experience so if you could dumb it down as much as possible, that would be much appreciated!
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TinyAccordion JavaScript Accordion</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="options">
<a href="javascript:parentAccordion.pr(1)">Exand All</a> | <a href="javascript:parentAccordion.pr(-1)">Collapse All</a>
</div>
<ul class="acc" id="acc"><!--Opening of accordian section-->
<li><!--Top Header (Year in this instance) -->
<h3>2012</h3>
<div class="acc-section">
<div class="acc-content">
<ul class="acc" id="nested">
<li>
<h3>January</h3>
<div class="acc-section">
<div class="acc-content">
<ul id="list-items">
<li>Sermon 1 (Genesis 1:1)</li>
<li>Sermon 2 (Genesis 2:1)</li>
<li>Sermon 3 (Genesis 3:1)</li>
<li>Sermon 4 (Genesis 4:1)</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li><!--The main ending tags for the whole section of the acordian-->
<li>
<h3>2011</h3>
<div class="acc-section">
<div class="acc-content">
</div>
</div>
</li>
<li>
<h3>2010</h3>
<div class="acc-section">
<div class="acc-content">
</div>
</div>
</li>
</ul>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);
var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",1,-1,"acc-selected");
</script>
</body>
</html>
Js:
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
