折叠插件提供了一种显示和隐藏内容的快速方法。它通过几个类和 Bootstrap 4 JavaScript 插件将内容的可感知性翻转到程序之上。
内容的翻转（切换）需要与href属性或具有data-target属性的按钮连接。在这两种情况下，都需要data-toggle=”collapse” 。
句法：
与href属性链接。
或者
具有数据目标属性的按钮。
显示卡片：
例子：
HTML
How to automatically close all
collapsible elements inside of
the accordion when closing the
accordion?
Geeksforgeeks
Connect with href
Basic Example
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4
JavaScript plugins.
HTML
Multiple Collapse
Geeksforgeeks
Flip first card
Multiple collapse
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
Multiple collapse
Collapse plugin provides a quick way
of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
HTML
Accordion
Geeksforgeeks
Collapse plugin provides a
quick way of revealing and
hiding content. It toggle
the visibility of content
across your program project
with a few classes and
Bootstrap4 JavaScript plugins.
Using the card component, you
can extend the default collapse
behavior to create an
accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
HTML
Accordion
Geeksforgeeks
Some Content of First One
Some Content of First Two
Some Content of First Three
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出：
**注意：这里的内容放置在中心，如果你不想要它然后删除
多个目标：多个或元素可以显示或隐藏组件，以防它们使用其href或data-target属性引用它。 或可以通过在其 href或data-target属性中使用 jQuery 选择器引用它们来显示和隐藏多个元素。
例子：
HTML
Multiple Collapse
Geeksforgeeks
Flip first card
Multiple collapse
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
Multiple collapse
Collapse plugin provides a quick way
of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins.
输出：
手风琴：利用卡片组件，您将能够扩展默认的折叠行为以形成手风琴。
示例：
HTML
Accordion
Geeksforgeeks
Collapse plugin provides a
quick way of revealing and
hiding content. It toggle
the visibility of content
across your program project
with a few classes and
Bootstrap4 JavaScript plugins.
Using the card component, you
can extend the default collapse
behavior to create an
accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出：
关闭手风琴时如何自动关闭手风琴内部的所有可折叠元素？
例子：
HTML
Accordion
Geeksforgeeks
Some Content of First One
Some Content of First Two
Some Content of First Three
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
Collapse plugin provides a quick
way of revealing and hiding content.
It toggle the visibility of content
across your program project with a
few classes and Bootstrap4 JavaScript
plugins. Using the card component,
you can extend the default collapse
behavior to create an accordion.
输出：
为什么我们使用aria-expanded 和 aria-controls？
将aria-expanded添加到控件组件中。这种质量明确地（明确地）将与控件绑定的可折叠组件的当前状态传递给屏幕阅读器（阅读器）和类似的辅助技术。如果可折叠组件默认关闭，则控件组件上的属性应该具有 (set) aria-expanded=”false”的尊重。如果您已使用 show 类将可折叠组件设置为默认打开，则在控件脚背上设置 aria-expanded=”true”。因此，该插件将根据可折叠组件是否已打开或关闭（通过 JavaScript，或因为客户端激活另一个与同一可折叠组件过于相关的控件组件）在控件上翻转（切换）此特征。如果控件元素的 HTML 组件不是按钮（例如 或 如果您的控件组件专注于单个可折叠组件（即data-target属性指示 id 选择器），您应该将aria-controls属性包含到控件组件中，其中包含可折叠组件的 id .先进的屏幕阅读器和比较辅助的进步（技术）利用这一特性为客户提供额外的替代路线，以直接探索可折叠组件本身。 我们可以通过数据属性或通过 javascript使用 Collapse 和 Accordion。 通过数据属性： collapse 插件利用许多类来处理压倒性的提升： 向组件添加data-toggle=”collapse”和data-target以自然地分配对一个或多个可折叠组件的控制。 data-target属性确认 CSS 选择器应用折叠。毫无疑问，将类折叠包含到可折叠组件中。如果您希望它默认打开，请添加额外的课程展示。 要将类似手风琴的收集管理包含在可折叠范围内，请包含信息属性data-parent=”#selector” 。 通过 JavaScript： 方法：
$('.collapse').collapse()