点击“三角”折叠隐藏在左边

Question

我见有些后台管理系统，左边的菜单是可以折叠隐藏起来的，通常是有个小三角的按钮，点一下它，就把菜单折叠起来，再点一下它，就可以完整显示菜单。但是有个问题，我见很多都是只是折叠，没有把右边的内容也拉过来。简单的说，当折叠起来的时候，右边的内容的表格或者DIV是宽是100%
请问这个怎么做呢？
如果不明白右边宽变成100%。。那退一步说，这个折叠怎么做？

Answer 1

晕倒 
最简单就用控件，或者是用JavaScript处理不就好了？

Answer 2

超级晕倒我知道是java做的 ，我也知道最简单就用控件，或者是用JavaScript处理
但是怎么没人告诉我思路或者代码啊？？实现折叠的代码。

Answer 3

点左别三角时把左边div隐藏起来，改变右边div宽度100%

Answer 4

给一个垂直折叠的代码<div id="Container" style="width:500px;">
 <div>
   <div id="Button1" style="height:20px;cursor:hand;" onclick="div_Click(this);"> <!--模拟Button按钮-->
   </div>
   <div id="Content1" style="height:400px;display:none;">
      <!--层中的内容1-->
   </div>
 </div>
 <div>
   <div id="Button2" style="height:20px;cursor:hand;" onclick="div_Click(this);"> <!--模拟Button按钮-->
   </div>
   <div id="Content2" style="height:400px;display:none;">
      <!--层中的内容2-->
   </div>
 </div>
</div>
var objEx;//目标显示层
var timer;
//点击按钮
function div_Click(obj)
{
   HideDiv();//先隐藏所有层
   clearInterval(timer);
   switch(obj.id)//判断被点击div的id
   {
      case "Button1":
      {
          objEx=document.getElementById("Content1");
          break;
      }
      case "Button2":
      {
          objEx=document.getElementById("Content2");
          break;
      }
      default:
      {
          break;
      }
   }
   objEx.style.height="0px";//高度从0开始增加
   objEx.style.display="block"; //显示层
   timer=setInterval(ShowDiv,10);//每10毫秒  高度增加20px 模拟滑动效果
}//隐藏层
function HideDiv()
{
    document.getElementById("Content1").style.display="none";
    document.getElementById("Content2").style.display="none";
}//显示层
function ShowDiv()
{
   objEx.style.height=parseInt(objEx.style.height)+20+"px";
   if(parseInt(objEx.style.height)>=400)//高度达到本身高度，停止
     clearInterval(timer);
}
试过，能用