i 'm not able to use the accordion menu code in for loop . can anyone solve ma problem.
code.......
slider.js------> java script
slider.css----->style sheet for the accordion menu
slider.html------>
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScri pt Slider Example</title>
<link rel="stylesheet " href="slider.cs s" 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]
code.......
slider.js------> java script
Code:
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)}
}
};}();
Code:
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}
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JavaScri pt Slider Example</title>
<link rel="stylesheet " href="slider.cs s" 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]
Comment