Accordion example 5

Component
Name	Accordion
Description	Accordion written in Bootstrap's own markup
Provider	Skin
Note	The code differs a little from Bootstrap's documentation, because MediaWiki does not allow buttons in wikitext.
Reference	getbootstrap.com - accordion
Styling	For all possible color styles and corresponding examples, see colors.

Accordion

Opening one item closes the others.

Code

<div class="accordion mb-3" id="accordion-faq">
  <div class="accordion-item">
    <div class="accordion-header"><div class="accordion-button" data-bs-toggle="collapse" data-bs-target="#accordion-faq-1" role="button" tabindex="0">What is Bootstrap?</div></div>
    <div class="accordion-collapse collapse show" id="accordion-faq-1" data-bs-parent="#accordion-faq">
      <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-faq-2" role="button" tabindex="0">How does Bootstrap get into MediaWiki?</div></div>
    <div class="accordion-collapse collapse" id="accordion-faq-2" data-bs-parent="#accordion-faq">
      <div class="accordion-body">
The [[Bootstrap (extension)|Bootstrap extension]] provides it, and the [[Chameleon]] skin installs that extension automatically. The [[Medik]] and [[Tweeki]] skins ship their own copy.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-faq-3" role="button" tabindex="0">What does BootstrapComponents add?</div></div>
    <div class="accordion-collapse collapse" id="accordion-faq-3" data-bs-parent="#accordion-faq">
      <div class="accordion-body">
The [[BootstrapComponents]] extension adds tags and parser functions for components that need HTML tags MediaWiki does not allow, such as <code>a</code> and <code>button</code>.
      </div>
    </div>
  </div>
</div>

Result

What is Bootstrap?

The Bootstrap framework is a popular open-source front-end framework for building responsive websites.

How does Bootstrap get into MediaWiki?

The Bootstrap extension provides it, and the Chameleon skin installs that extension automatically. The Medik and Tweeki skins ship their own copy.

What does BootstrapComponents add?

The BootstrapComponents extension adds tags and parser functions for components that need HTML tags MediaWiki does not allow, such as a and button.

Flush and always open

Here, items stay open when another one opens, and the accordion has no outer border.

Code

<div class="accordion accordion-flush mb-3" id="accordion-flush">
  <div class="accordion-item">
    <div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-flush-1" role="button" tabindex="0">Grid</div></div>
    <div class="accordion-collapse collapse" id="accordion-flush-1">
      <div class="accordion-body">
The [[grid]] builds layouts from rows and up to twelve columns.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-flush-2" role="button" tabindex="0">Colors</div></div>
    <div class="accordion-collapse collapse" id="accordion-flush-2">
      <div class="accordion-body">
[[Colors]] lists the CSS classes for text, background and border colors.
      </div>
    </div>
  </div>
  <div class="accordion-item">
    <div class="accordion-header"><div class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#accordion-flush-3" role="button" tabindex="0">Components</div></div>
    <div class="accordion-collapse collapse" id="accordion-flush-3">
      <div class="accordion-body">
[[Components]] lists all components documented on this wiki.
      </div>
    </div>
  </div>
</div>

Result

Grid

The grid builds layouts from rows and up to twelve columns.

Colors

Colors lists the CSS classes for text, background and border colors.

Components

Components lists all components documented on this wiki.

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!