From Brotato Wiki
(INITIAL \o/) |
(Add docs for ToggleButton) |
||
| (One intermediate revision by the same user not shown) | |||
| 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}} | |||
|} | |||
=== Separate Button === | |||
You can insert the toggle button on its own with [[Template:ToggleButton|ToggleButton]]. This can be used with [[Template:ToggleSection|ToggleSection]] for instances where your toggleable section doesn't immediately follow the button. | |||
{| class="wikitable" style="width: 80%;" | |||
! Code | |||
! Preview | |||
|- | |||
| style="width: 40%;" | <pre> | |||
{{ToggleButton|id=separatebtn|btn=Toggle Separate Section}} | |||
{{ToggleSection|id=separatebtn}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
</pre> | |||
| {{ToggleButton|id=separatebtn|btn=Toggle Separate Section}} | |||
{{ToggleSection|id=separatebtn}} | |||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | |||
{{ToggleEnd}} | |||
|} | |||
<templatedata> | <templatedata> | ||
| Line 21: | Line 108: | ||
"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 119: | ||
}, | }, | ||
"paramOrder": [ | "paramOrder": [ | ||
" | "btn", | ||
"id" | "id" | ||
] | ] | ||
} | } | ||
</templatedata></noinclude> | </templatedata></noinclude> | ||
Latest revision as of 13:46, 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. |
Separate Button
You can insert the toggle button on its own with ToggleButton. This can be used with ToggleSection for instances where your toggleable section doesn't immediately follow the button.
| Code | Preview |
|---|---|
{{ToggleButton|id=separatebtn|btn=Toggle Separate Section}}
{{ToggleSection|id=separatebtn}}
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
{{ToggleEnd}}
|
Toggle Separate Section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
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 |