Question

I have two Javascript scripts on a site. One is an accordion (show/hide) and the other is a basic script to show/hide based on a hyperlink click. Both scripts work fine independently, but once together on the same page the accordion one stops working: the click to display the items in the accordion stops working. Here’s the code:

<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>

<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>

<script>
$(function(){
    $(".para").click(function(){
        $("#fillit").html($(this).next(".details1").html()); 
    });
    $(".details1:first").clone().appendTo("#fillit").show();    
});
</script>

<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>

content of script.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/2)*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}
}();

Answer 1

I don’t think these scripts actually conflict. You are loading the accordion code after you try to use it. Perhaps reorder your script tags.

<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>

should go before the use of TINY.accordion which it defines:

var parentAccordion=new TINY.accordion.slider("parentAccordion");

I don’t know enough about the meaning of the string arguments in the call to init, but perhaps you could change the script element that creates the accordion and initializes it to happen on document load, for example by delaying it using jQuery’s $.ready or by moving it after any elements whose ids appear in those string arguments.

Also the accordion code is unintentionally using a global s. And short names like s can easily collide which is a maintenance hazard even if not the cause of your immediate problem.

var a=T$(t), i=s=0, ...

is not declaring s locally. Perhaps edit it to say

var a=T$(t), s, i=s=0, ...