Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    79
    Thanks
    0
    Thanked 7 Times in 7 Posts

    Collapse/Expand Boxes

    Hey,

    I wondered if anyone would be able to help me?

    I'm not a great coder so I thought I would ask to see if anyone would be nice enough to lend a hand!

    I'm trying to make collapsible/expandable boxes, but have rounded edges!

    I've looked around the internet but I couldn't find anything, I also search the forums and couldn't find anything!

    An example would be like on the new myspace layout, so even when it collapses its still rounded!

    If anyone would be able to help it would be really appreciated!

    Thanks, Carl.




    like this
    Last edited by CarlLawl; 10-13-2008 at 06:17 PM.

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,091
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Look into using CSS instead of JS.

    Google: 'css rounded box'

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    79
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by jmrker View Post
    Look into using CSS instead of JS.

    Google: 'css rounded box'
    Yes a round box is easy...

    What i said was im trying to make a rounded box that collapses but still stays rounded at the bottom when collapsed like on the new myspace style home page

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    function zxcCorners(zxcid,zxcradx,zxcrady,zxccol){
     var zxcp=document.getElementById(zxcid);
     zxcp.obj=zxcp.getElementsByTagName('DIV')[0];
     zxcrady=zxcrady||zxcradx;
    // plot TR quadrant circumference at max of 1px X
     var zxcary=[[0,-zxcrady,zxcrady]];
     var zxcnu=0
     for (zxc0=271;zxc0<=360;zxc0++){
      var zxcx=Math.floor(zxcradx*Math.cos(zxc0*Math.PI/180));
      var zxcy=Math.floor(zxcrady+zxcrady*Math.sin(zxc0*Math.PI/180))
      var zxcht=zxcrady-zxcy;
      var zxctop=zxcy-zxcrady
      zxcary.push([zxcx,zxctop,zxcht])
      for (var zxc0a=1;zxc0a<(zxcx-zxcnu);zxc0a++){ zxcary.push([(zxcnu+zxc0a),zxctop,zxcht]); }
      zxcnu=zxcx;
     }
    // ensure ordered left to right
     zxcary=zxcary.sort(zxcSort);
    // draw lines at circumference height filtering out duplicate X cordinates
     zxcp.segary=[]
     zxcp.segary[0]=zxcES('DIV',{position:'absolute',left:zxcradx+'px',top:zxcrady+'px',width:'20px',height:'20px',border:'solid black 0px'},zxcp.obj);
     var zxcnu=-1001;
     var zxcpary=[[null],[],[],[]];
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      if (zxcnu!=zxcary[zxc1][0]){
       zxcpary[0].push(zxcary[zxc1]);
       zxcES('DIV',{position:'absolute',overflow:'hidden',left:(zxcary[zxc1][0])+'px',top:((zxcary[zxc1][1]))+'px',width:'1px',height:(zxcary[zxc1][2])+'px',fontSize:'1px',backgroundColor:zxccol},zxcp.segary[0]);
      }
      zxcnu=zxcary[zxc1][0];
     }
    // clone segment TR for BR,BL,TR segments and re-dimension
     for (var zxc2=1;zxc2<4;zxc2++){
      zxcp.segary[zxc2]=zxcES(zxcp.segary[0].cloneNode(true),{},zxcp.obj);
      var zxcclds0=zxcp.segary[0].childNodes;
      var zxcclds=zxcp.segary[zxc2].childNodes;
      for (var zxc2a=0;zxc2a<zxcclds.length;zxc2a++){
       zxcpary[zxc2][zxc2a+1]=[(zxc2==1)?zxcpary[0][zxc2a+1][0]:-zxcpary[0][zxc2a+1][0],(zxc2<3)?0:zxcpary[0][zxc2a+1][1],zxcpary[0][zxc2a+1][2]];
       zxcES(zxcclds[zxc2a],{left:zxcpary[zxc2][zxc2a+1][0]+'px',top:zxcpary[zxc2][zxc2a+1][1]+'px'});
      }
     }
     var zxch=zxcSV(zxcp.obj,'height')+'px';
     zxcES(zxcp.segary[0],{left:zxcp.obj.style.width,top:'0px'});
     zxcES(zxcp.segary[1],{left:zxcp.obj.style.width,top:zxch});
     zxcES(zxcp.segary[2],{left:0+'px',top:zxch});
     zxcES(zxcp.segary[3],{left:0+'px',top:0+'px'});
     zxcp.top=zxcES('DIV',{position:'absolute',left:'0px',top:-zxcrady+'px',width:zxcSV(zxcp.obj,'width')+'px',height:zxcrady+'px',backgroundColor:zxccol},zxcp.segary[3]);
     zxcp.bot=zxcES(zxcp.top.cloneNode(false),{top:'1px'},zxcp.segary[2]);
     zxcp.lft=zxcES('DIV',{position:'absolute',left:-zxcradx+1+'px',top:0+'px',width:zxcradx+'px',height:zxch,backgroundColor:zxccol},zxcp.segary[3]);
     zxcp.rig=zxcright=zxcES(zxcp.lft.cloneNode(false),{left:0+'px'},zxcp.segary[0]);
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcSort(zxca,zxcb){
     var zxcaa=zxca[0];
     var zxcbb=zxcb[0];
     if (zxcaa>zxcbb) return 1;
     if (zxcaa<zxcbb) return -1;
     return 0;
    }
    
    function zxcSV(zxcobj,zxcp){
     if (zxcobj.currentStyle) return parseInt(zxcobj.currentStyle[zxcp.replace(/-/g,'')]);
     return parseInt(document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase()));
    }
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcToggle(zxcid,zxcmin){
     var zxcp=document.getElementById(zxcid);
     if (!zxcp.max){
      zxcp.max=zxcSV(zxcp.obj,'height');
      zxcp.pmax=zxcSV(zxcp,'height');
      zxcp.bheight=zxcSV(zxcp.segary[0],'height')*2;
     }
     zxcBAnimator('height#',zxcp.rig,zxcp.max,zxcmin-zxcp.bheight,1000)
     zxcBAnimator('top#',zxcp.segary[1],zxcp.max,zxcmin-zxcp.bheight,1000)
     zxcBAnimator('height#',zxcp.lft,zxcp.max,zxcmin-zxcp.bheight,1000)
     zxcBAnimator('top#',zxcp.segary[2],zxcp.max,zxcmin-zxcp.bheight,1000)
     zxcBAnimator('height#',zxcp.obj,zxcp.max,zxcmin,1000)
     zxcBAnimator('height#',zxcp,zxcp.pmax,zxcmin,1000)
    }
    //-->
    </script>
    
    </head>
    
    <body onload="zxcCorners('tst2',20,20,'#FFCC66');">
    <input type="button" name="" value="Toggle" onclick="zxcToggle('tst2',60);">
    
    <div id="tst2" style="position:absolute;overflow:hidden;left:100px;top:100px;width:340px;height:190px;border:solid black 0px;" >
    <div  style="position:absolute;left:20px;top:20px;width:300px;height:150px;border:solid black 0px;" >
    Some Text
    </div>
    </div>
    
    </body>
    
    </html>
    I have use JS for the corners

    but if you post an example of how you apply corners I will have a look
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    79
    Thanks
    0
    Thanked 7 Times in 7 Posts
    sort of like this! like on myspace!

    where it still stays round when you collapse it!


  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    // Basic Element Animator (11-October-2008) DRAFT
    // by Vic Phillips http://www.vicsjavascripts.org.uk
    
    // To progressively change the Left, Top, Width, Height or Opacity of an element over a specified period of time.
    
    // **** Application Notes
    
    // **** The HTML Code
    //
    // when moving an element the inline or class rule style position of the element should be assigned as
    // 'position:relative;' or 'position:absolute;'
    //
    // The element would normally be assigned a unique ID name.
    //
    
    // **** Executing the Effect(Script)
    //
    // The effect is executed by an event call to function 'zxcBAnimator('left','tst1',20,260,2000);'
    // where:
    // parameter 0 = the mode(see Note 1).                                                                     (string)
    // parameter 1 = the unique ID name or element object.                                                     (string or element object)
    // parameter 2 = the start position of the effect.                                                         (digits, for opacity minimum 0, maximum 100)
    // parameter 3 = the finish position of the effect.                                                        (digits, for opacity minimum 0, maximum 100)
    // parameter 4 = (optional) period of time between the start and finish of the effect in milliseconds.     (digits or defaults to 2000 milliSeconds)
    //
    //  Note 1:  The default units(excepting opacity) are 'px'.
    //  Note 2:  Examples modes: 'left', 'top', 'width', 'height', 'opacity.
    //           For hyphenated modes, the first character after the hyphen must be upper case, all others lower case.
    //  Note 3:  To 'toggle' the effect include '#' in parameter 0.
    //           The first call will set the toggle parameters.
    //           Subsequent calls with '#' in parameter 0 and the same start and finish parameters will 'toggle' the effect.
    //  Note 4:  The function may be re-executed with a different set of parameters (start/finish time or period)
    //           whenever required, say from an onclick/mouseover/out event.
    //           The period parameter will be retained unless re-specified.
    //
    // **** Advanced Applications
    //
    //  It may be required to access the current value of the effect.
    //  The element effect is accessible from the element property
    //  element effect = elementobject[mode.replace(/[-#]/g,'')+'oop'];
    //  where mode is parameter 0 of the initial call.
    //  An array storing the current, start and finish values of the element effect may be accessed
    //  from the element effect.data as fields 0, 1 and 2 respectively
    //
    
    // **** General
    //
    // All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
    // These characters may be changed to characters of choice using global find and replace.
    //
    // The Functional Code(about 2K) is best as an External JavaScript.
    //
    // Tested with IE7 and Mozilla FireFox on a PC.
    //
    
    
    
    // **** Functional Code - NO NEED to Change
    
    
    function zxcBAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
     if (!zxcobj||(!zxcsrt&&!zxcfin)||zxcsrt==zxcfin) return;
     var zxcoop=zxcobj[zxcmde.replace(/[-#]/g,'')+'oop'];
     if (zxcoop){
      clearTimeout(zxcoop.to);
      if (zxcoop.srtfin[0]==zxcsrt&&zxcoop.srtfin[1]==zxcfin&&zxcmde.match('#')) zxcoop.update([zxcoop.data[0],(zxcoop.srtfin[0]==zxcoop.data[2])?zxcfin:zxcsrt],zxctime);
      else zxcoop.update([zxcsrt,zxcfin],zxctime);
     }
     else zxcobj[zxcmde.replace(/[-#]/g,'')+'oop']=new zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime);
    }
    
    function zxcBAnimatorOOP(zxcmde,zxcobj,zxcsrt,zxcfin,zxctime){
     this.srtfin=[zxcsrt,zxcfin];
     this.to=null;
     this.obj=zxcobj;
     this.mde=zxcmde.replace(/[-#]/g,'');
     this.update([zxcsrt,zxcfin],zxctime);
    }
    
    zxcBAnimatorOOP.prototype.update=function(zxcsrtfin,zxctime){
     this.time=zxctime||this.time||2000;
     this.data=[zxcsrtfin[0],zxcsrtfin[0],zxcsrtfin[1]];
     this.srttime=new Date().getTime();
     this.cng();
    }
    
    zxcBAnimatorOOP.prototype.cng=function(){
     var zxcms=new Date().getTime()-this.srttime;
     this.data[0]=(this.data[2]-this.data[1])/this.time*zxcms+this.data[1];
     if (this.mde!='left'&&this.mde!='top'&&this.data[0]<0) this.data[0]=0;
     if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
     else  zxcOpacity(this.obj,this.data[0]);
     if (zxcms<this.time) this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),10);
     else {
      this.data[0]=this.data[2];
      if (this.mde!='opacity') this.obj.style[this.mde]=this.data[0]+'px';
      else zxcOpacity(this.obj,this.data[0]);
     }
    }
    
    function zxcOpacity(zxcobj,zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     zxcobj.style.filter='alpha(opacity='+zxcopc+')';
     zxcobj.style.opacity=zxcobj.style.MozOpacity=zxcobj.style.KhtmlOpacity=zxcopc/100-.001;
    }
    
    /*]]>*/
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    var corners1;
    
    function zxcCorners(zxcvar,zxcradx,zxcrady,zxccol,zxcbg){
     zxcrady=zxcrady||zxcradx;
    // plot TR quadrant circumference at max of 1px X
     var zxcary=[[0,-zxcrady,zxcrady]];
     var zxcnu=0
     for (zxc0=271;zxc0<=360;zxc0++){
      var zxcx=Math.floor(zxcradx*Math.cos(zxc0*Math.PI/180));
      var zxcy=Math.floor(zxcrady+zxcrady*Math.sin(zxc0*Math.PI/180));
      var zxcht=zxcrady-zxcy;
      var zxctop=zxcy-zxcrady
      zxcary.push([zxcx,zxctop,zxcht])
      for (var zxc0a=1;zxc0a<(zxcx-zxcnu);zxc0a++){ zxcary.push([(zxcnu+zxc0a),zxctop,zxcht]); }
      zxcnu=zxcx;
     }
    // ensure ordered left to right
     zxcary=zxcary.sort(zxcSort);
    // draw lines at circumference height filtering out duplicate X cordinates
     var zxcsegary=[]
     zxcsegary[0]=zxcES('DIV',{position:'absolute',top:'0px',width:zxcradx+'px',height:zxcrady+'px',border:'solid black 0px',backgroundColor:zxcbg});
     var zxcnu=-1001;
     var zxcpary=[[null],[],[],[]];
     for (var zxc1=0;zxc1<zxcary.length;zxc1++){
      if (zxcnu!=zxcary[zxc1][0]){
       zxcpary[0].push(zxcary[zxc1]);
       zxcES('DIV',{position:'absolute',overflow:'hidden',left:(zxcary[zxc1][0])+'px',top:((zxcary[zxc1][1]))+zxcradx+'px',width:'1px',height:(zxcary[zxc1][2])+'px',fontSize:'1px',backgroundColor:zxccol},zxcsegary[0]);
      }
      zxcnu=zxcary[zxc1][0];
     }
    // clone segment TR for BR,BL,TR segments and re-dimension
     for (var zxc2=1;zxc2<4;zxc2++){
      zxcsegary[zxc2]=zxcES(zxcsegary[0].cloneNode(true),{});
      var zxcclds0=zxcsegary[0].childNodes;
      var zxcclds=zxcsegary[zxc2].childNodes;
      for (var zxc2a=0;zxc2a<zxcclds.length;zxc2a++){
       zxcpary[zxc2][zxc2a+1]=[(zxc2==1)?zxcpary[0][zxc2a+1][0]:-zxcpary[0][zxc2a+1][0],(zxc2<3)?0:zxcpary[0][zxc2a+1][1],zxcpary[0][zxc2a+1][2]];
       zxcES(zxcclds[zxc2a],{left:zxcpary[zxc2][zxc2a+1][0]+(zxc2>1?zxcradx:0)+'px',top:zxcpary[zxc2][zxc2a+1][1]+(zxc2>2?zxcrady:0)+'px'});
      }
     }
     window[zxcvar]=zxcsegary;
    }
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string') zxcele=document.createElement(zxcele);
     for (key in zxcstyle) zxcele.style[key]=zxcstyle[key];
     if (zxcp) zxcp.appendChild(zxcele);
     if (zxctxt) zxcele.appendChild(document.createTextNode(zxctxt));
     return zxcele;
    }
    
    function zxcSort(zxca,zxcb){
     return (zxca[0]>zxcb[0])?1:(zxca[0]<zxcb[0])?-1:0;
    }
    
    function zxcSV(zxcobj,zxcp){
     if (zxcobj.currentStyle) return parseInt(zxcobj.currentStyle[zxcp.replace(/-/g,'')]);
     return parseInt(document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase()));
    }
    
    //-->
    </script>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcPlaceCorners(zxcid,zxcsegary){
     var zxcp=document.getElementById(zxcid),zxcradx=zxcSV(zxcsegary[0],'width'),zxcrady=zxcSV(zxcsegary[0],'height'),zxclft=zxcSV(zxcp,'width')-zxcradx;
     var zxctitle=zxcp.getElementsByTagName('DIV')[0],zxch=zxcSV(zxctitle,'height');
     zxcp.zxcsegary=[];
     zxcp.zxcsegary[0]=zxcES(zxcsegary[0].cloneNode(true),{left:zxclft+'px',top:'0px'},zxctitle);
     zxcp.zxcsegary[1]=zxcES(zxcsegary[1].cloneNode(true),{left:zxclft+'px',top:zxch-zxcrady+'px'},zxctitle);
     zxcp.zxcsegary[2]=zxcES(zxcsegary[2].cloneNode(true),{left:'0px',top:zxch-zxcrady+'px'},zxctitle);
     zxcp.zxcsegary[3]=zxcES(zxcsegary[3].cloneNode(true),{left:'0px',top:'0px'},zxctitle);
     zxcp.max=zxcSV(zxcp,'height')
     zxcp.min=zxcSV(zxctitle,'height')
     zxcp.to=null;
     zxcp.img=zxctitle.getElementsByTagName('IMG')[0];
     zxcBAnimator('height#',zxcp,zxcp.max,zxcp.min,10);
    }
    
    function zxcToggle(zxcid,zxcspd){
     var zxcp=document.getElementById(zxcid);
     clearTimeout(zxcp.to);
     zxcspd=zxcspd||1000;
     var zxcud=zxcp.heightoop.data[0];
     zxcud=zxcud==zxcp.min;
     zxcp.to=setTimeout( function(){ zxcToggleDo(zxcp,zxcud,zxcspd); },zxcud?10:zxcspd);
     zxcBAnimator('height#',zxcp,zxcp.max,zxcp.min,zxcspd);
    }
    
    function zxcToggleDo(zxcp,zxcud,zxcspd){
     zxcp.img.src=zxcp.img.src.replace(zxcud?'down':'up',zxcud?'up':'down');
     zxcES(zxcp.zxcsegary[1],{visibility:zxcud?'hidden':'visible'});
     zxcES(zxcp.zxcsegary[2],{visibility:zxcud?'hidden':'visible'});
    }
    //-->
    </script>
    
    </head>
    
    <body bgcolor="#FFFFCC" onload="zxcCorners('corners1',10,10,'#FFCC66','#FFFFCC');zxcPlaceCorners('tst2',corners1);zxcPlaceCorners('tst3',corners1);">
    <div id="tst2" style="position:relative;overflow:hidden;width:340px;height:240px;left:100px;top:100px;background-Color:#CCFFFF;border:solid black 0px;" >
    <div style="position:absolute;overflow:hidden;width:340px;height:40px;left:0px;top:0px;background-Color:#FFCC66;border:solid black 0px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" style="position:absolute;left:300px;top:10px;"
    onclick="zxcToggle('tst2',1000)"
     >
    </div>
    </div>
    <div id="tst3" style="position:relative;overflow:hidden;width:340px;height:240px;left:100px;top:105px;background-Color:#CCFFFF;border:solid black 0px;" >
    <div style="position:absolute;overflow:hidden;width:340px;height:40px;left:0px;top:0px;background-Color:#FFCC66;border:solid black 0px;" >
    <img src="http://www.vicsjavascripts.org.uk/StdImages/down[1].gif" style="position:absolute;left:300px;top:10px;"
    onclick="zxcToggle('tst3',1000)"
     >
    </div>
    </div>
    </body>
    
    </html>
    Last edited by vwphillips; 10-14-2008 at 04:11 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    search for javascript accordion

    http://tutorialblog.org/10-javascrip...rdion-scripts/


    and then have these gents above help with the css to round those edges

  • #8
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    ogod

    have you noted how much code those scrips use?

    my annimator is about 2K
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •