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

Question

我想创建这样的东西:
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，还需要扩展“部分”div。加长它，同时扩大它。动画加长和加宽将是一个“不错的”功能，不是很有必要。
您能否建议适合实现此目的的 CSS 和/或 JavaScript？我不想使用任何 jQuery、Bootstrap 或类似的东西。
谢谢
帕维尔

Answer 1

“你可以把它想象成一个展开成大 div 的按钮。但实际上，应该展开的是整个 div，按钮只是它的一部分(在 div 内)。”
好的，我猜您想先显示一个按钮，然后单击它时，水平和垂直显示一堆东西
您可以通过将父 div 的宽度和高度设置为按钮的确切尺寸来做到这一点，确保没有边距，然后设置溢出:隐藏在父级中，然后在按下按钮时，将高度和高度更改为 100% 或一些其他值取决于您要显示多少东西，然后在其他小鸡上单击将尺寸设置回按钮的尺寸