From Brotato Wiki

(Add docs + Shorten `btntext` option to just `btn`)
(Add docs for ToggleButton)
 
Line 76: Line 76:
|}
|}


=== 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>

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}}
Toggle Section

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.

Template parameters

ParameterDescriptionTypeStatus
Button Textbtn

Text for the toggle button

Default
Toggle
Example
Toggle More Details
Stringrequired
IDid

Unique identifier for the toggle

Stringrequired