okay so here is my site
http://39webdesign.streamlinenettria...ntitled-1.html
and heres the code: (question below)


<html>
<head>
<script type="text/javascript">
var expand1=0;
var expand2=0;
var expand3=0;
var newHTML11 = "<div id='big1'><button onClick='shrink_td1()'>small</button></div>"
var newHTML12 = "<div id='content1'><button onClick='expand_td1()'>big</button></div>"
var newHTML13 = "<div id='small1'><button onClick='expand_td1()'>big</button></div>"
var newHTML21 = "<div id='big2'><button onClick='shrink_td2()'>small</button></div>"
var newHTML22 = "<div id='content2'><button onClick='expand_td2()'>big</button></div>"
var newHTML23 = "<div id='small2'><button onClick='expand_td2()'>big</button></div>"
var newHTML31 = "<div id='big3'><button onClick='shrink_td3()'>small</button></div>"
var newHTML32 = "<div id='content3'><button onClick='expand_td3()'>big</button></div>"
var newHTML33 = "<div id='small3'><button onClick='expand_td3()'>big</button></div>"
function expand_td1()
{
document.getElementById('content1').innerHTML = newHTML11;
document.getElementById("td1")
.style.width=761;
document.getElementById("td2")
.style.width=20;
document.getElementById('content2').innerHTML = newHTML23;
document.getElementById("td3")
.style.width=20;
document.getElementById('content3').innerHTML = newHTML33;
document.getElementById("td3")
.style.height=450;

expand1=1;
}

function shrink_td1()
{
document.getElementById('content1').innerHTML = newHTML12;
document.getElementById("td1")
.style.width=267;
document.getElementById("td2")
.style.width=267;
document.getElementById("td3")
.style.width=267;
document.getElementById("td3")
.style.height=450;



expand1=0;
}

function expand_td2()
{
document.getElementById('content2').innerHTML = newHTML21;
document.getElementById("td1")
.style.width=20;
document.getElementById('content1').innerHTML = newHTML13;
document.getElementById("td2")
.style.width=761;
document.getElementById("td3")
.style.width=20;
document.getElementById('content3').innerHTML = newHTML33;
document.getElementById("td3")
.style.height=450;

expand2=1;
}


function shrink_td2()
{
document.getElementById('content2').innerHTML = newHTML22;
document.getElementById("td1")
.style.width=267;
document.getElementById("td2")
.style.width=267;
document.getElementById("td3")
.style.width=267;
document.getElementById("td3")
.style.height=450;

expand2=0;
}

function expand_td3()
{
document.getElementById('content3').innerHTML = newHTML31;
document.getElementById("td1")
.style.width=20;
document.getElementById('content1').innerHTML = newHTML13;
document.getElementById("td2")
.style.width=20;
document.getElementById('content2').innerHTML = newHTML23;
document.getElementById("td3")
.style.width=761;
document.getElementById("td3")
.style.height=450;

expand3=1;
}

function shrink_td3()
{
document.getElementById('content3').innerHTML = newHTML32;
document.getElementById("td1")
.style.width=267;
document.getElementById("td2")
.style.width=267;
document.getElementById("td3")
.style.width=267;
document.getElementById("td3")
.style.height=450;

expand3=0;
}
</script>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border=1>
<tr>
<td id="td1" width="267"><div id="content1"><button onClick="expand_td1()" onClick="shrink_td2()" onClick="shrink_td3()">big</button>original</div></td>
<td id="td2" width="267"><div id="content2"><button onClick="expand_td2()" onClick="shrink_td3()" onClick="shrink_td1()">big</button>origionl</div></td>
<td id="td3" width="267"><div id="content3"><button onClick="expand_td3()" onClick="shrink_td2()" onClick="shrink_td1()">big</button>original</div></td>
</tr>
</table>
</body>
</html>

when I click the buttons it just jumps to the new layout but how can I make it animate the transition