By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,847 Members | 3,242 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,847 IT Pros & Developers. It's quick & easy.

can Accordion menu can be used in a " for loop" or not?

P: 1
i 'm not able to use the accordion menu code in for loop . can anyone solve ma problem.


code.......

slider.js------> java script
Expand|Select|Wrap|Line Numbers
  1. var slider=function(){
  2.     var array=[]; var speed=10; var timer=10;
  3.     return{
  4.         init:function(t,c){
  5.             var s,ds,l,i,y;
  6.             s=document.getElementById(t); ds=s.getElementsByTagName('div'); l=ds.length; i=y=0;
  7.             for(i=0;i<l;i++){
  8.                 var d,did; d=ds[i]; did=d.id;
  9.                 if(did.indexOf("header")!=-1){
  10.                     y++; d.onclick=new Function("slider.process(this)");
  11.                 }else if(did.indexOf("content")!=-1){
  12.                     array.push(did.replace('-content','')); d.maxh=d.offsetHeight;
  13.                     if(c!=y){d.style.height='0px'; d.style.display='none'}
  14.                     else{d.style.display='block'}
  15.                 } 
  16.             }
  17.         },
  18.         process:function(d){
  19.             var cl,i; cl=array.length; i=0;
  20.             for(i;i<cl;i++){
  21.                 var s,h,c,cd;
  22.                 s=array[i]; h=document.getElementById(s+'-header');
  23.                 c=s+'-content'; cd=document.getElementById(c); clearInterval(cd.timer);
  24.                 if(h==d&&cd.style.display=='none'){
  25.                     cd.style.display='block'; this.islide(c,1);
  26.                 }else if(cd.style.display=='block'){this.islide(c,-1)}
  27.             }
  28.         },
  29.         islide:function(i,d){var c,m; c=document.getElementById(i); m=c.maxh; c.direction=d; c.timer=setInterval("slider.slide('"+i +"')",timer)},
  30.         slide:function(i){
  31.             var c,m,h,dist; c=document.getElementById(i); m=c.maxh; h=c.offsetHeight;
  32.             dist=(c.direction==1)?Math.round((m-h)/speed):Math.round(h/speed);
  33.             if(dist<=1){dist=1}
  34.             c.style.height=h+(dist*c.direction)+'px'; c.style.opacity=h/c.maxh; c.style.filter='alpha(opacity='+(h*100/c.maxh)+')';
  35.             if(h<2&&c.direction!=1){
  36.                 c.style.display='none'; clearInterval(c.timer);
  37.             }else if(h>(m-2)&&c.direction==1){clearInterval(c.timer)}
  38.         }
  39. };}();
  40.  
  41.  
slider.css----->style sheet for the accordion menu
Expand|Select|Wrap|Line Numbers
  1. body {
  2. margin:0; 
  3. font-family:Arial, Helvetica, sans-serif; font-size:12px}
  4.  
  5. #slider {
  6. width:459px}
  7.  
  8. .header {
  9. width:439px; 
  10. border:2px solid #9ac1c9; 
  11. padding:8px; 
  12. font-weight:bold; 
  13. margin-top:5px; 
  14. cursor:pointer; 
  15. background:url(images/header.gif)}
  16.  
  17. .header:hover {
  18. background:url(images/header_over.gif)}
  19.  
  20. .content {
  21. overflow:hidden}
  22.  
  23. .text {
  24. width:425px; 
  25. border:2px solid #9ac1c9; 
  26. border-top:none; 
  27. padding:15px}
  28.  
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]
Sep 23 '08 #1
Share this Question
Share on Google+
3 Replies


drhowarddrfine
Expert 5K+
P: 7,435
This is not a html or css question.
Sep 23 '08 #2

acoder
Expert Mod 15k+
P: 16,027
Moved to the JavaScript forum.

Moderator.
Sep 28 '08 #3

rnd me
Expert 100+
P: 427
i dont see a Accordion menu or a loop.

where is that part, and what are you needing to get done?
Sep 29 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.