Can't get Accordion Script to collapse

**kuau** · 09-17-2011, 06:57 AM

It seems no matter what I do I cannot get this TINY Accordian script to work. I have put all the css and js into this page so that if you View Source you can see it all. I thought I followed the instructions but it doesn't work. I am using html5 on the real page but left the demo doctype here...

http://www.costgallery.com/php/accordion.php

This is where I got the script in the first place...

http://www.scriptiny.com/page/4/

I have spent so much time on this I am reluctant to bail and start over with something else. Javascript doesn't like me. Please help. Mahalo, e

**vwphillips** · 09-17-2011, 09:35 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TinyAccordion JavaScript Accordion</title>
<link rel="stylesheet" href="http://www.costgallery.com/php/css/admin.css" type="text/css">
<style>
#options { width:720px; margin:5px auto; text-align:right; color:#9ac1c9; }
#options a { text-decoration:none; color:#9ac1c9; }  #options a:hover { color:#033; }
#acc, #nested { list-style:none; color:#033; margin:0 auto 40px; }
#acc a { color:blue; text-decoration:underline; }
* { margin:0 auto; padding:0; }
#acc { width:720px; }  #nested { width:688px; }  /* 720-457= 263  425+263 = 688 */
.textcol3w h1 { color:#ce9827; }  .textcol3w h2 { color:#ce9827; font-weight:bold; }
#acc h3, #nested h3 { border:1px solid #9ac1c9; padding:6px 6px 7px; font:bold 14px Arial, Helvetica, sans-serif; color:#009; margin-top:5px; cursor:pointer; background:url(/img/gr/header.gif); }
#acc h3 { width:706px; } #nested h3 { width:674px; }  /* 443  411*/
#acc h3:hover, #nested h3:hover { background:url(/img/gr/header_over.gif); }
#acc .acc-section, #nested .acc-section { overflow:hidden; background:#fff; }
#acc .acc-content, #nested .acc-content { padding:15px; border:1px solid #9ac1c9; border-top:none; background:#fff; }
#acc .acc-content { width:688px; }  #nested .acc-content { width:656px; }
#nested .acc-selected { background:url(/img/gr/header_over.gif); }
</style>
</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">
<li><h3>About</h3><div class="acc-section"><div class="acc-content">
<ul class="acc" id="nested">
<li><h3>Introduction</h3><div class="acc-section"><div class="acc-content">

</div></div></li><!--end acc-content+end acc-section-->
<li><h3>Mission Statement</h3><div class="acc-section"><div class="acc-content">

</div></div></li><!--end acc-content+end acc-section-->

<li><h3>Job Description: </h3><div class="acc-section"><div class="acc-content">

</div></div></li><!--end acc-content+end acc-section-->

</ul>
	This lightweight (1.2 KB) JavaScript accordion can easily be customized to integrate with any website. For more information visit <a href="http://www.leigeber.com">leigeber.com</a>.
</div></div></li><!--end acc-content+end acc-section-->

<!--solo section-->
<li><h3>Company Background</h3><div class="acc-section"><div class="acc-content">
<h2>Structure</h2>
</div></div></li>
<!--solo section-->

<li><h3>Product Knowledge</h3><div class="acc-section"><div class="acc-content">

</div></div></li>
</ul><!--end accordion-->
<script type="text/javascript">
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,h,c,v;
        this.s=k||0;
        this.m=m||0;

		for(i;i<l;i++){
			v=n[i];
			if(v.nodeType==1){
				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}
}();
</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>

**kuau** · 09-17-2011, 04:41 PM

Dear Vic: Thanks a million!!! You really made my night. I have no idea what you changed, but it must have been in that mass of (to me) impenetrable code. My accordion now works perfectly. Did you add that cool hydraulic effect?

I checked out your website! WOW! What a treasure trove. You do things I didn't even know were possible. You truly are a genius. Incredible site... thank you. Definitely worth a donation or two. Namaste.

Thread: Can't get Accordion Script to collapse

Thread Tools

Search Thread

Can't get Accordion Script to collapse

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions