Accordion example 2
From Bootstrap - Demo Wiki
| Component | ||
|---|---|---|
| Name | Accordion | |
| Description | An accordion with an active panel | |
| Provider | Skin | |
| Reference | BootstrapComponents Extension docs - accordion | |
| Styling | For all possible color styles and corresponding examples, see colors. | |
Accordion with an active panel
- Result
<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_accordion>
- 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_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.
