i 'm not able to use the accordion menu code in for loop . can anyone solve ma problem.
code.......
slider.js------> java script
- var slider=function(){
-
var array=[]; var speed=10; var timer=10;
-
return{
-
init:function(t,c){
-
var s,ds,l,i,y;
-
s=document.getElementById(t); ds=s.getElementsByTagName('div'); l=ds.length; i=y=0;
-
for(i=0;i<l;i++){
-
var d,did; d=ds[i]; did=d.id;
-
if(did.indexOf("header")!=-1){
-
y++; d.onclick=new Function("slider.process(this)");
-
}else if(did.indexOf("content")!=-1){
-
array.push(did.replace('-content','')); d.maxh=d.offsetHeight;
-
if(c!=y){d.style.height='0px'; d.style.display='none'}
-
else{d.style.display='block'}
-
}
-
}
-
},
-
process:function(d){
-
var cl,i; cl=array.length; i=0;
-
for(i;i<cl;i++){
-
var s,h,c,cd;
-
s=array[i]; h=document.getElementById(s+'-header');
-
c=s+'-content'; cd=document.getElementById(c); clearInterval(cd.timer);
-
if(h==d&&cd.style.display=='none'){
-
cd.style.display='block'; this.islide(c,1);
-
}else if(cd.style.display=='block'){this.islide(c,-1)}
-
}
-
},
-
islide:function(i,d){var c,m; c=document.getElementById(i); m=c.maxh; c.direction=d; c.timer=setInterval("slider.slide('"+i +"')",timer)},
-
slide:function(i){
-
var c,m,h,dist; c=document.getElementById(i); m=c.maxh; h=c.offsetHeight;
-
dist=(c.direction==1)?Math.round((m-h)/speed):Math.round(h/speed);
-
if(dist<=1){dist=1}
-
c.style.height=h+(dist*c.direction)+'px'; c.style.opacity=h/c.maxh; c.style.filter='alpha(opacity='+(h*100/c.maxh)+')';
-
if(h<2&&c.direction!=1){
-
c.style.display='none'; clearInterval(c.timer);
-
}else if(h>(m-2)&&c.direction==1){clearInterval(c.timer)}
-
}
-
};}();
-
-
slider.css----->style sheet for the accordion menu
- body {
-
margin:0;
-
font-family:Arial, Helvetica, sans-serif; font-size:12px}
-
-
#slider {
-
width:459px}
-
-
.header {
-
width:439px;
-
border:2px solid #9ac1c9;
-
padding:8px;
-
font-weight:bold;
-
margin-top:5px;
-
cursor:pointer;
-
background:url(images/header.gif)}
-
-
.header:hover {
-
background:url(images/header_over.gif)}
-
-
.content {
-
overflow:hidden}
-
-
.text {
-
width:425px;
-
border:2px solid #9ac1c9;
-
border-top:none;
-
padding:15px}
-
slider.html------>
[HTML]<!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>JavaScript Slider Example</title>
<link rel="stylesheet" href="slider.css" type="text/css" />
<script type="text/javascript" src="slider.js"></script>
</head>
<body onload="slider.init('slider',1)">
<div id="slider">
<div class="header" id="one-header">Header One</div>
<div class="content" id="one-content">
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit.
</div>
</div>
<div class="header" id="two-header">Header Two</div>
<div class="content" id="two-content">
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel.
</div>
</div>
<div class="header" id="three-header">Header Three</div>
<div class="content" id="three-content">
<div class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris mollis cursus dolor. Vivamus sapien nunc, vestibulum eget, facilisis vel, luctus at, nunc. Nam ullamcorper volutpat elit. Vivamus sit amet velit eu sapien dignissim mattis.
</div>
</div>
</div>
</body>
</html>[/HTML]
