折叠 Collapse
折叠插件通过类切换内容的可见性，按钮或链接作为触发器映射到需要显示/隐藏的元素，支持垂直、水平以及多目标切换。
基础按钮切换
按钮上写 data-bs-toggle="collapse" 与 data-bs-target="#id"，点击即在显示与隐藏之间切换。
这是折叠组件的占位内容。面板默认隐藏，点击上方按钮后以高度动画展开；再次点击按钮收起。折叠过程中会依次套用
collapse、collapsing、collapse show 三个状态类。
HTML 示例
链接触发
除按钮外，带 href 的链接也能触发折叠（需加 role="button"）；两个触发器指向同一面板时会保持状态同步。
链接触发的折叠面板。无论先点链接还是先点按钮，两个触发器与面板状态都保持同步——面板开着时再点任意一个，都会收起。
HTML 示例
多目标折叠
触发器的 data-bs-target 接受 CSS 选择器列表：一个按钮同时控制多个面板；被控制的面板加 multi-collapse 类。
第一个折叠面板。「同时切换两个面板」按钮会把它和旁边的面板一起展开或收起。
第二个折叠面板。两个面板通过
.multi-collapse 类被同一个选择器选中。
HTML 示例
横向折叠
加 collapse-horizontal 让动画方向从高度变为宽度；在内容元素上指定 width（如 style="width:300px"）。
这是一个横向折叠面板：它从左向右展开宽度，而不是上下展开高度。常用于抽屉式说明区或侧边信息栏。
HTML 示例