如何将<div>转换为可折叠面板？

Question

如下图所示，我想折叠左侧蓝色面板

我正在尝试使用HTML创建左蓝色面板。但我不知道如何创建可折叠面板？

Answer 1

使用的概念

单击按钮时执行功能。

代码说明

首先，同一位置有2个按钮：myButton1和myButton2

myButton2显示div当前不可见（display：none;）。

单击mybutton1时会减小＆＃34; menu＆＃34;的宽度。 div并且在使myButton2可见时隐藏自己。单击myButton2时，它会恢复＆＃34; menu＆＃34;的宽度。 div和隐藏自己，同时使button1可见。

＆＃13;

＆＃13;

function toggle1() {
  document.getElementById("menu").style.width = "2px";
  document.getElementById("myButton1").style.display = "none";
  document.getElementById("myButton2").style.display = "block";

};
function toggle2() {
  document.getElementById("menu").style.width = "100px";
  document.getElementById("myButton2").style.display = "none";
  document.getElementById("myButton1").style.display = "block";

};

＆＃13;

#menu {
  width: 100px;
  height: 500px;
  background: blue;
}
#myButton1 {
  position: absolute;
}
#myButton2 {
  position: absolute;
  display: none;
}

＆＃13;

<div id="container">
  <input onclick="toggle1()" type="button" value="hide" id="myButton1"></input>
  <input onclick="toggle2()" type="button" value="show" id="myButton2"></input>
  <div id="menu">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这会给你一个div和一个按钮。默认情况下，div是折叠的，但是当您单击按钮时，div将展开以显示内容。再次单击该按钮将再次折叠它。

HTML：

<a href="#" class="panel-toggle">Panel Button</a>
<div class="blue-panel">a blue panel</div>

CSS：

.blue-panel{overflow:hidden; max-height: 0;}

.blue-panel.active{max-height: 1000px;}

JS：

jQuery('.panel-toggle').click(function() {
    jQuery('.blue-panel').toggleClass('active');
});