Accordion – An accordion with an active and inactive panel
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Accordion | |
| Description | An accordion with an active and inactive panel | |
| Provider | Skin | |
| Reference | BootstrapComponents Extension docs - accordion | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Accordion with an active and inactive panel
- Result
Panel active
This is an accordion panel that is active by default, i.e. its content will be visible when the page is loaded, but it can still be collapsed.
Panel inactive
This is an accordion panel that is inactive by default, i.e. its content will be hidden when the page is loaded, but it can still be expanded.
- Code
<bootstrap_accordion>
<bootstrap_panel heading="Panel active" active>
This is an accordion panel that is active by default, i.e. its content will be visible when the page is loaded, but it can still be collapsed.</bootstrap_panel>
<bootstrap_panel heading="Panel inactive">
This is an accordion panel that is inactive by default, i.e. its content will be hidden when the page is loaded, but it can still be expanded.</bootstrap_panel>
</bootstrap_accordion>
Tip
To avoid a bottom margin below the title in the accordion's header, add the following to your "MediaWiki:Common.css" page:
/* Bootstrap Components
* Avoid margin a the bottom of the card title
*/
.card-title {
margin-bottom: 0 !important;
}
To avoid the same for the panel content, avoid putting the closing bootstrap panel tag (</bootstrap_panel>) into a new line. See the example code on this page.
