隐藏另一个动态扩展div

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>
            <a href="javascript:hideshow(document.getElementById('col1'))">Hide</a>
        </div>

        <div id="col2mid">
            <p>test</p>
            <a href="javascript:hideshow(document.getElementById('col2mid'))">Hide</a>
        </div>


        <div id="col2side">
            <p>test</p>
            <a href="javascript:hideshow(document.getElementById('col2side'))">Hide</a>
        </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/