Bootstrap 是一个开源的前端 CSS 框架，广泛用于交互式网站的开发。使用 HTML 和 JavaScript 的 Bootstrap 为用户界面添加了交互性。 jQuery 是一个 JS 库，用于操作 HTML DOM、事件处理、CSS 动画和 Ajax。 jQuery 也是一个免费的开源库，被超过 73% 的开发人员使用。 jQuery 以简化的方式完成由 JavaScript 执行的任务。
在本文中，我们将讨论在动态折叠中显示前两行的方法。 Bootstrap 捆绑了各种各样的功能，Bootstrap 提供的功能之一是用于显示和隐藏内容的可折叠组件。按钮或锚点用作我们切换的特定元素的触发器。以下是有助于折叠以显示元素的类。
课程：
- .collapse：该类隐藏内容
- .collapsing ：此类在从折叠状态到可见状态的转换期间应用，反之亦然
- .collapse.show ：这个类显示内容。
可访问性：手风琴可以证明我们的要求。 “卡片”组件用于扩展默认折叠行为以创建手风琴。 aria-expanded属性被添加到控制元素。该属性表示绑定到控件的可折叠元素的当前状态。
如果默认情况下可折叠元素是关闭的，则该属性设置为aria-expanded=”false” 。如果要使用 show类默认显示可折叠元素，则在控件上设置 aria-expanded=”true”。这会根据可折叠元素的当前状态自动切换控件上的此属性。
如果控件元素针对单个可折叠元素，即data-target属性指向“id”选择器，那么我们应该将aria-controls属性添加到包含可折叠元素的“id”的控件元素。当显示可折叠项目时，将关闭父项下的所有可折叠元素。
示例 1：
This is slot 1.
This is slot 2.
This is slot 3.
This is slot 4.
输出： 
在以下示例中，默认情况下，手风琴的前两行始终保持打开状态。即使单击行标题也没有切换效果。这是因为前两行没有导致切换效果的“data-toggle”、“data-target”、“aria-expanded”、“aria-controls”属性。由于前两行的 data-parent属性也被删除，它们独立于显示切换功能的其余行。最后两行具有完整的所有必需属性，因此它们显示了动态折叠功能。
方法：第二种方法与第一种方法非常相似，除了我们创建嵌套的手风琴并删除前两行的 data-toggle 属性。前两行有data-parent属性。如果用户希望在前两行添加折叠功能，请添加data-toggle属性。单击第一行时，标题将打开并折叠第二行，反之亦然。前两行独立于后两行作为第一行和第二行的数据父属性值。
This is slot 1.
This is slot 2.
This is slot 3.
This is slot 4.
输出： 
视频输出： 