在隐藏另一个动态展开div

Question

我是新来张贴在这个网站上，所以请原谅我可能会犯的任何错误。

因此，正如我的问题所述，我基本上在寻找一种动态扩展div的方法。到目前为止，我有一个内部有三列的容器div。每个列都有一个链接，指向一些JavaScript，将其设置为disply：none。例如，如果我要点击中间列中的隐藏按钮，我想要扩展两个外部列以占据剩下的空间。也许有一种方法可以将两者的宽度从33％增加到50％，而隐藏中间的宽度。

因此，其他两个div实质上共享它们之间新创建的空间。

这是我的HTML和CSS，因为它是刚才：

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; 
} 

预先感谢您的帮助，如果这个道歉问题已经被询问

Answer 1

Hy！

你可以尝试这样的：

点击隐藏按钮：

$(document).ready(function(){ 
    $('button').click(function(){ 
    $('#col1').css("display","none"); 
    $('#col2mid').css("width","49%"); 
    $('#col2side').css("width","49%"); 
    }) 
}); 

这是很简单的方式调整大小的div ...

，如果你想点击coloumn然后隐藏/显示和调整大小将需要重新命名您的列，或者您的代码将很长...

编辑：

事情是这样的：

http://jsfiddle.net/pbnkH/