Horizontal Accordian Table

[Rei Kon]

<style type="text/css">
<!--
#sm {margin: 0px; padding: 2px;}
.sm {list-style:none; width:745px; height:125px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden}
-->
</style>

<div width="750px" style="text-align:center; height: 150px; margin-top: 10px; margin-bottom: 5px;"><table cellspacing="1px" cellpadding="0px" class="bordercolor"><tr><td class="catbg" cellPadding="3px" style="padding: 3px;">Your Staff</td></tr>
<tr><td class="windowbg2"><br><ul id="sm" class="sm" style="height="130px">
   <li><table><tr><td vAlign="top"><img src="http://i1104.photobucket.com/albums/h328/shophostingbbne/534ed3b4.png" alt="" /> </td><td vAlign="top"><b>Badr al-Miraj</b><br> Administrator<br><br>Badr al-Miraj is the main admin and founder of this site. There is numerous sites created by the person behind the alias however this site has become her brain child</td></tr></table></li>
<li><table><tr><td vAlign="top"><img src="http://i993.photobucket.com/albums/af51/MaryEvereska/Assassins%20Creed%20SP/ezio1o.jpg" alt="" /></td><td vAlign="top">Currently this staff position is untaken, and as thus there is absolutely no information to put about this member of staff. However please note that this staff member is a highly valued member of the community, or will be when we get one. Please check back frequently for updates</td></tr></table></li>
<li><table><tr><td vAlign="top"><img src="http://i993.photobucket.com/albums/af51/MaryEvereska/Assassins%20Creed%20SP/ezio1o.jpg" alt="" /></td><td vAlign="top">Currently this staff position is untaken, and as thus there is absolutely no information to put about this member of staff. However please note that this staff member is a highly valued member of the community, or will be when we get one. Please check back frequently for updates</td></tr></table></li>
<li><table><tr><td vAlign="top"><img src="http://i993.photobucket.com/albums/af51/MaryEvereska/Assassins%20Creed%20SP/ezio1o.jpg" alt="" /></td><td vAlign="top">Currently this staff position is untaken, and as thus there is absolutely no information to put about this member of staff. However please note that this staff member is a highly valued member of the community, or will be when we get one. Please check back frequently for updates</td></tr></table></li>
<li><table><tr><td vAlign="top"><img src="http://i993.photobucket.com/albums/af51/MaryEvereska/Assassins%20Creed%20SP/ezio1o.jpg" alt="" /></td> <td vAlign="top">Currently this staff position is untaken, and as thus there is absolutely no information to put about this member of staff. However please note that this staff member is a highly valued member of the community, or will be when we get one. Please check back frequently for updates</td></tr></table></li>
<li><table><tr><td vAlign="top"><img src="http://i993.photobucket.com/albums/af51/MaryEvereska/Assassins%20Creed%20SP/ezio1o.jpg" alt="" /></td> <td vAlign="top">Currently this staff position is untaken, and as thus there is absolutely no information to put about this member of staff. However please note that this staff member is a highly valued member of the community, or will be when we get one. Please check back frequently for updates</td></tr></table></li>
</ul><br></td></tr></table>
</div>
<br><br>
<script type="text/javascript">
<!--
var slideMenu=function(){
   var sp,st,t,m,sa,l,w,sw,ot;
   return{
       build:function(sm,sw,mt,s,sl,h){
           sp=s; st=sw; t=mt;
           m=document.getElementById(sm);
           sa=m.getElementsByTagName('li');
           l=sa.length; w=m.offsetWidth; sw=w/l;
           ot=Math.floor((w-st)/(l-1)); var i=0;
           for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
           if(sl!=null){m.timer=setInterval(function(){slideMenu.slide(sa[sl-1])},t)}
       },
       timer:function(s){s.onmouseover=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMenu.slide(s)},t)} },
       slide:function(s){
           var cw=parseInt(s.style.width);
           if(cw<st){
               var owt=0; var i=0;
               for(i;i<l;i++){
                   if(sa[i]!=s){
                       var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width);
                       if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}
                       owt=owt+(ow-oi)}}
               s.style.width=(w-owt)+'px';
           }else{clearInterval(m.timer)}
       }
   };
}();
function addLoadEvent(func) {
   var oldonload = window.onload;
   if (typeof window.onload != 'function') {
       window.onload = func;
   } else {
       window.onload = function() {
           if (oldonload) {
               oldonload();
           }
           func();
       }
   }
}
addLoadEvent(slideMenu.build('sm',470,10,10,1));
//-->
</script>

I've done a bit more work on my own code give it a whiz - feel free to resize the size of the table etc in the css to say 110

[Streamstrider]

Do you think you could explain a few of the variables to me? What are the numbers at the end behind the addLoadEvent? It's still moving the last slide down for some reason.

[Rei Kon]

addLoadEvent(slideMenu.build('sm',470,10,10,1)); < this bit?

the first part is the id/class of what its using to target it ('sm') 470 is the width it expands to, the next one I've not discovered what it does yet, the 10 following that is speed, the 1 I've not touched

edit: just noticed two issues in my own css, overflow: hidden} should be overflow: hidden;}

[NetMaster]

I explained what the numbers are for back in my post but to recap:

body onload="slideMenu.build('sm',200,10,10,1)"

The first parameter is the id of the unordered list you would like to bind the accordion to.

The second is the width you would like the accordion selection to expand to.

The third is the timeout variable to control how quickly the sliding function is called.

The fourth is the speed of the accordion with 1 being the fastest.

The last is optional and is the integer that corresponds to the section you would like to be expanded when the accordion is loaded.

[Streamstrider]

I think it's conflicting with something on my forum. Right now it seems like more trouble than it's really worth. XD