54 lines
2.6 KiB
HTML
54 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang=en data-bs-theme=dark>
|
||
|
|
<head>
|
||
|
|
<meta charset=utf-8>
|
||
|
|
<meta name=viewport content="width=device-width, initial-scale=1">
|
||
|
|
<title>Accordion Example</title>
|
||
|
|
<link rel=stylesheet type=text/css
|
||
|
|
href=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1 class=visually-hidden>Accordion Example</h1>
|
||
|
|
<main class=container>
|
||
|
|
<div class=accordion id=accordionExample>
|
||
|
|
<div class=accordion-item>
|
||
|
|
<h2 class=accordion-header>
|
||
|
|
<button class=accordion-button type=button data-bs-toggle=collapse
|
||
|
|
data-bs-target=#collapse-accordionExample-1
|
||
|
|
aria-expanded=true aria-controls=collapse-accordionExample-1>Accordion Item #1</button>
|
||
|
|
</h2>
|
||
|
|
<div class="accordion-collapse collapse show"
|
||
|
|
id=collapse-accordionExample-1
|
||
|
|
data-bs-parent=#accordionExample>
|
||
|
|
<div class=accordion-body>
|
||
|
|
This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate
|
||
|
|
classes that we use to style each element. These classes control the overall appearance, as well as the showing and
|
||
|
|
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's
|
||
|
|
also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
|
||
|
|
</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=#collapse-accordionExample-2
|
||
|
|
aria-expanded=false aria-controls=collapse-accordionExample-2>Accordion Item #2</button>
|
||
|
|
</h2>
|
||
|
|
<div class="accordion-collapse collapse"
|
||
|
|
id=collapse-accordionExample-2
|
||
|
|
data-bs-parent=#accordionExample>
|
||
|
|
<div class=accordion-body>
|
||
|
|
This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate
|
||
|
|
classes that we use to style each element. These classes control the overall appearance, as well as the showing and
|
||
|
|
hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's
|
||
|
|
also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
<script
|
||
|
|
src=https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js></script>
|
||
|
|
</body>
|
||
|
|
</html>
|