From Brotato Wiki
(INITIAL \o/) |
(Add docs + Shorten `btntext` option to just `btn`) |
||
| Line 1: | Line 1: | ||
<onlyinclude><includeonly><!-- | <onlyinclude><includeonly><!-- | ||
--><span class="mw-customtoggle-{{{id|1}}} btn btn--toggler">{{{ | --><span class="mw-customtoggle-{{{id|1}}} btn btn--toggler">{{{btn|Toggle}}}</span> | ||
<div class="mw-collapsible mw-made-collapsible mw-collapsed toggler" id="mw-customcollapsible-{{{id|1}}}" data-expandtext="▼" data-collapsetext="▲"><!-- | <div class="mw-collapsible mw-made-collapsible <!-- | ||
-->{{#if:{{{open|}}}|<!--start open-->|mw-collapsed}} toggler" id="mw-customcollapsible-{{{id|1}}}" data-expandtext="▼" data-collapsetext="▲"><!-- | |||
--></includeonly></onlyinclude><noinclude><!--NOTE: the editor will show an error due to a missing closing div, this is expected and is OK --> | --></includeonly></onlyinclude><noinclude><!--NOTE: the editor will show an error due to a missing closing div, this is expected and is OK --> | ||
Starts a toggleable section, with a button that collapses/uncollapses the wrapped text. | Starts a toggleable section, with a button that collapses/uncollapses the wrapped text. | ||
Must be used with Template:ToggleEnd, which ends the toggleable section. | Must be used with [[Template:ToggleEnd|ToggleEnd]], which ends the toggleable section. | ||
The ID should be unique, because the button will toggle any/all other toggleable sections with the same ID. Alternatively, if this effect is desired, the same ID can be used across multiple toggles. | The ID should be unique, because the button will toggle any/all other toggleable sections with the same ID. Alternatively, if this effect is desired, the same ID can be used across multiple toggles. | ||
== Examples == | |||
=== Start Closed === | |||
This is the default behaviour, with the target section initially closed. | |||
{| class="wikitable" style="width: 80%;" | |||
! Code | |||
! Preview | |||
|- | |||
| style="width: 40%;" | <pre> | |||
{{ToggleStart|id=foo|btn=Toggle Section}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
</pre> | |||
| {{ToggleStart|id=foo|btn=Toggle Section}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
|} | |||
=== Start Open === | |||
Uses the option <code>open=1</code>. | |||
{| class="wikitable" style="width: 80%;" | |||
! Code | |||
! Preview | |||
|- | |||
| style="width: 40%;" | <pre> | |||
{{ToggleStart|id=bar|btn=Toggle Section|open=1}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
</pre> | |||
| {{ToggleStart|id=bar|btn=Toggle Section|open=1}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
|} | |||
=== Multiple Sections === | |||
You can toggle multiple sections with a single button, by using [[Template:ToggleSection|ToggleSection]] for each extra section. | |||
{| class="wikitable" style="width: 80%;" | |||
! Code | |||
! Preview | |||
|- | |||
| style="width: 40%;" | <pre> | |||
{{ToggleStart|id=multidemo|btn=Toggle Section}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
{{ToggleSection|id=multidemo}} | |||
Quisque aliquet ipsum nec magna mattis tincidunt. | |||
{{ToggleEnd}} | |||
</pre> | |||
| {{ToggleStart|id=multidemo|btn=Toggle Multiple Sections}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
{{ToggleSection|id=multidemo}} | |||
Quisque aliquet ipsum nec magna mattis tincidunt. | |||
{{ToggleEnd}} | |||
|} | |||
<templatedata> | <templatedata> | ||
| Line 21: | Line 88: | ||
"suggested": true | "suggested": true | ||
}, | }, | ||
" | "btn": { | ||
"label": "Button Text", | "label": "Button Text", | ||
"description": "Text for the toggle button", | "description": "Text for the toggle button", | ||
| Line 32: | Line 99: | ||
}, | }, | ||
"paramOrder": [ | "paramOrder": [ | ||
" | "btn", | ||
"id" | "id" | ||
] | ] | ||
} | } | ||
</templatedata></noinclude> | </templatedata></noinclude> | ||
Revision as of 13:40, 11 December 2022
Starts a toggleable section, with a button that collapses/uncollapses the wrapped text.
Must be used with ToggleEnd, which ends the toggleable section.
The ID should be unique, because the button will toggle any/all other toggleable sections with the same ID. Alternatively, if this effect is desired, the same ID can be used across multiple toggles.
Examples
Start Closed
This is the default behaviour, with the target section initially closed.
| Code | Preview |
|---|---|
{{ToggleStart|id=foo|btn=Toggle Section}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{{ToggleEnd}}
|
Toggle Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Start Open
Uses the option open=1.
| Code | Preview |
|---|---|
{{ToggleStart|id=bar|btn=Toggle Section|open=1}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{{ToggleEnd}}
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
Multiple Sections
You can toggle multiple sections with a single button, by using ToggleSection for each extra section.
| Code | Preview |
|---|---|
{{ToggleStart|id=multidemo|btn=Toggle Section}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{{ToggleEnd}}
{{ToggleSection|id=multidemo}}
Quisque aliquet ipsum nec magna mattis tincidunt.
{{ToggleEnd}}
|
Toggle Multiple Sections
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquet ipsum nec magna mattis tincidunt. |
No description.
| Parameter | Description | Type | Status | |
|---|---|---|---|---|
| Button Text | btn | Text for the toggle button
| String | required |
| ID | id | Unique identifier for the toggle | String | required |