...

View Full Version : Collapse/Expand Boxes



CarlLawl
10-12-2008, 12:32 PM
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
http://i37.tinypic.com/2ps0qop.png

jmrker
10-12-2008, 04:59 PM
Look into using CSS instead of JS.

Google: 'css rounded box'

CarlLawl
10-12-2008, 06:42 PM
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

vwphillips
10-13-2008, 12:06 AM
<!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',bord er:'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.seg ary[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

CarlLawl
10-13-2008, 06:16 PM
sort of like this! like on myspace!

where it still stays round when you collapse it!

http://i37.tinypic.com/2ps0qop.png

vwphillips
10-14-2008, 12:57 PM
<!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('t st3',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>

ohgod
10-14-2008, 01:45 PM
search for javascript accordion

http://tutorialblog.org/10-javascript-accordion-scripts/


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

vwphillips
10-14-2008, 02:08 PM
ogod

have you noted how much code those scrips use?

my annimator is about 2K



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum