如何使用纯CSS / JavaScript创建水平和垂直可折叠的HTML div，即没有jQuery，没有Boostrap等？

如何解决如何使用纯CSS / JavaScript创建水平和垂直可折叠的HTML div，即没有jQuery，没有Boostrap等？

我想创建这样的东西：

https://www.w3schools.com/howto/howto_js_collapsible.asp

但是它应该在垂直和水平方向扩展（并折叠）。您可以将其想象为一个扩展为大div的按钮。但是，实际上，应该扩展整个div，而按钮只是其中一部分（在div内部）。

以下是一些提示HTML：

<div class="section">
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>

我不仅需要扩展“可折叠内容” div，还需要扩展“ section” div。在延长和扩大它的同时。动画加长和加宽将是“不错的”功能，并非十分必要。

能否请您提出适合实现此目标的CSS和/或JavaScript？我不想雇用任何jQuery，Bootstrap或类似的东西。

感谢帕维尔

解决方法

“您可以将其想象为一个扩展为一个大div的按钮。但是，实际上，应该扩展整个div，该按钮只是其中的一部分（在div内部）。”

好吧，我猜您想先显示一个按钮，然后单击它，然后水平和垂直显示一堆东西

您可以通过将父div的宽度和高度设置为按钮的确切尺寸来做到这一点，确保没有边距，然后设置溢出：隐藏在父项中，然后在按钮上按下，将高度和高度更改为100 ％或其他值，具体取决于您要显示多少东西，然后在其他小妞上，将尺寸设置回按钮的尺寸

如果您想保持这种简单而最小的效果，请尝试下面的代码。

<html>
<head>
<style>
.section{display: inline-block;transition: .25s;background-color: lightgray; width: auto;}
.collapsible-content{height: 0px;overflow: hidden;}
</style>
<script>
function toggle(elem)
{
    sec=elem.parentElement;
    if(sec.style.width!='100%') sec.style.width='100%'; else sec.style.width='auto';
    coll=sec.getElementsByClassName("collapsible-content")[0];
    if(coll.style.height!='auto') coll.style.height='auto'; else coll.style.height='0px';
}
</script>
</head>
<body>
<div class="section">
    <button type="button" class="collapsible" onclick="toggle(this);">
        Open collapsible
    </button>
    <div class="collapsible-content">
        <p>Lorem ipsum...</p>
    </div>
</div>
</body>
</html>

旋转一下。从该部分的背景色可以看出，它最初的尺寸很小。

点击后，我们可以在该部分中添加一个类，将其拉伸以覆盖整个屏幕，同时还显示隐藏的内容。它将再次被点击时恢复。

编辑：更改了背景颜色，因此可以更轻松地查看部分dev的扩展方式以及内容和按钮的扩展方式。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click",function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    var parent = this.parentElement;
    if (content.style.display === "block") {
      content.style.display = "none";
      parent.classList.remove("fill");
    } else {
      content.style.display = "block";
      parent.classList.add("fill");
    }
  });
}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  bottom: 0;
  overflow: hidden;
  background-color: #b38686;
}

.section {
    background-color: #5128;
    width:50%;
}


.fill {
  position: absolute;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
<div class="section">
  <h2>Collapsibles</h2>
    <button type="button" class="collapsible">
        Open collapsible
    </button>
    <div class="content">
        <p>Lorem ipsum...</p>
    </div>
</div>

</body>
</html>