Accordion example 7
From Bootstrap for MediaWiki
| Component | ||
|---|---|---|
| Name | Accordion | |
| Description | Accordion in light mode and dark mode | |
| Provider | Skin | |
| Note | Dark mode needs the CSS marked "Bootstrap dark mode" on MediaWiki:Common.css, because the Chameleon skin leaves out Bootstrap's dark mode. | |
| Reference | getbootstrap.com - color modes | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Light mode
- Code
<div class="accordion" id="accordion-example">
<div class="accordion-item">
<div class="accordion-header"><div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordion-example-1" role="button" tabindex="0">What is Bootstrap?</div></div>
<div class="accordion-collapse collapse show" id="accordion-example-1" data-bs-parent="#accordion-example">
<div class="accordion-body">
The [[Bootstrap (framework)|Bootstrap framework]] is a popular open-source front-end framework for building responsive websites.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-example-2" role="button" tabindex="0">Which skins use it?</div></div>
<div class="accordion-collapse collapse" id="accordion-example-2" data-bs-parent="#accordion-example">
<div class="accordion-body">
[[Chameleon]], [[Medik]] and [[Tweeki]].
</div>
</div>
</div>
</div>
- Result
The Bootstrap framework is a popular open-source front-end framework for building responsive websites.
Dark mode
The code is the same as for light mode, see Color modes.
- Result
The Bootstrap framework is a popular open-source front-end framework for building responsive websites.
