Bootstrap 简明教程
Bootstrap - Accordion
本章将讨论 Bootstrap 手风琴。手风琴垂直折叠元素，通过类更改显示和隐藏。使用折叠 JavaScript 插件来创建垂直折叠的手风琴。
This chapter will discuss about Bootstrap accordion. The accordion collapses elements vertically, shows and hides through class changes. Use the collapse JavaScript plugin to create accordions that collapse vertically.
How it works
为了折叠，手风琴在内部使用 collapse 。使用 .open 类将 .accordion 元素渲染为已扩展的手风琴。
In order to collapse, the accordion uses collapse internally. Use .open class to .accordion element to render an expanded accordion.
Basic Example
若要展开和折叠内容，请单击下面的手风琴。
To expand and collapse the content, click on the accordions below.
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Accordion</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
</style>
</head>
<body>
<div class="accordion" id="basicAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollapse" aria-expanded="true" aria-controls="firstCollapse">
Bootstrap - Accordian
</button>
</h2>
<div id="firstCollapse" class="accordion-collapse collapse show" data-bs-parent="#basicAccordion">
<div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollapse" aria-expanded="false" aria-controls="secondCollapse">
Bootstrap - Buttons
</button>
</h2>
<div id="secondCollapse" class="accordion-collapse collapse" data-bs-parent="#basicAccordion">
<div class="accordion-body">
You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more.
</div>
</div>
</div>
</div>
</body>
</html>Flush
若要呈现实边手风琴，请使用 .accordion-flush 来移除边框和圆角。
To render edge-to-edge accordions, use .accordion-flush to remove borders and rounded corners.
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Accordion</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
</style>
</head>
<body>
<div class="accordion accordion-flush" id="flushAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flushCollapseOne" aria-expanded="false" aria-controls="flushCollapseOne">
Bootstrap - Accordian
</button>
</h2>
<div id="flushCollapseOne" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
<div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#flushCollapseTwo" aria-expanded="false" aria-controls="flushCollapseTwo">
Bootstrap - Buttons
</button>
</h2>
<div id="flushCollapseTwo" class="accordion-collapse collapse" data-bs-parent="#flushAccordion">
<div class="accordion-body">
You can use Bootstrap’s custom button styles for actions in forms, dialogs and many more.
</div>
</div>
</div>
</div>
</div>
</body>
</html>Always open
若要在打开另一项的同时保持手风琴项处于打开状态，请从每个 .accordion-collapse 中移除 data-bs-parent 属性。
To keep accordion items open while another item is opened, remove data-bs-parent attribute from each .accordion-collapse.
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
You can edit and try running this code using *Edit & Run *option.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Accordion</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
<style>
</style>
</head>
<body>
<div class="accordion" id="alwaysOpenAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollpaseofAlwaysOpen" aria-expanded="true" aria-controls="firstCollpaseofAlwaysOpen">
Bootstrap - Accordian
</button>
</h2>
<div id="firstCollpaseofAlwaysOpen" class="accordion-collapse collapse show">
<div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#secondCollpaseofAlwaysOpen" aria-expanded="false" aria-controls="secondCollpaseofAlwaysOpen">
Bootstrap - Buttons
</button>
</h2>
<div id="secondCollpaseofAlwaysOpen" class="accordion-collapse collapse">
<div class="accordion-body">
The <b>accordion</b> collapses elements vertically, shown and hidden by class change.
</div>
</div>
</div>
</div>
</body>
</html>Accessibility
详情请参阅 collapse accessibility section 。
See collapse accessibility section for details.