Dynamically expand div upon hiding another - html

Question

I am new to posting on this site, so please excuse any errors I may make.
So as my question states, I'm essentially looking for a way to dynamically expand divs. So far I have a container div with three columns inside it. Each of the columns have a link to some javascript that sets it to disply:none. What I'm looking for a way to do is, for example, if I was to click the hide button in the center column, I want the two outer columns to expand to take up the space left behind. Perhaps a way to increase the width of the two from 33% each to 50% upon hiding the middle one.
So that the two other divs essentially share the newly created space between them.
Here is my html and css as it is just now:
HTML:
<div id="col2outer">
<div id="col1">
<p>test</p>
Hide
</div>
<div id="col2mid">
<p>test</p>
Hide
</div>
<div id="col2side">
<p>test</p>
Hide
</div>
</div>
CSS:
#container #col2outer {
height:200px;
width: 870px;
float: left;
margin: 0;
padding: 0;
}
#container #col1 {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
#col2outer #col2mid {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
#col2outer #col2side {
height:200px;
width: 33%;
float: left;
border-width: 0.5mm; border-style: groove;
-moz-border-radius: 15px;
border-radius: 15px;
}
Thank you in advance for any help, and apologies if this question has already been asked

Answer 1

Hy!
You can try something like:
Click on hide button:
$(document).ready(function(){
$('button').click(function(){
$('#col1').css("display","none");
$('#col2mid').css("width","49%");
$('#col2side').css("width","49%");
})
});
This is very simple way for resizing divs...
if you want to click on coloumn and then hide/show and resize you will need to rename your columns, or your code will be long...
EDIT:
Something like this:
http://jsfiddle.net/pbnkH/