Template:CustomToggleButton

This template is used to create a custom toggle button for a collapsable box. You need to add the text of the button and a name for the toggle button. This name needs to be used also for the collapsible box in the id-Property. For example like that:

{{CustomToggleButton|text=Show/Hide text|name=example-box}}

<div class="mw-collapsible" id="mw-customcollapsible-example-box">

This text will be shown/hidden by a press of the button.

</div>

[Show/Hide]

This text will be shown/hidden by a press of the button.

It is also possible to close multiple boxes with one button like that:

{{CustomToggleButton|text=Show/Hide all|name1=example-box-1|name2=example-box-2|name3=example-box-3|name4=example-box-4}}

<div class="mw-collapsible" id="mw-customcollapsible-example-box-1">

<b>Box 1: </b>This text will be shown/hidden by a press of the button.

</div>

<div class="mw-collapsible" id="mw-customcollapsible-example-box-2">

<b>Box 2: </b>This text will be shown/hidden by a press of the button.

</div>

<div class="mw-collapsible" id="mw-customcollapsible-example-box-3">

<b>Box 3: </b>This text will be shown/hidden by a press of the button.

</div>

<div class="mw-collapsible" id="mw-customcollapsible-example-box-4">

<b>Box 4: </b>This text will be shown/hidden by a press of the button.

</div>

It is NOT advisable, but possible, to have one button to toggle all and one to toggle only one of them. Because those buttons only toggle the states of the boxes! So then it is possible to have different states through out the boxes. That case is shown right below.

[Show/Hide all]

[Show/Hide Box 1]

Box 1: This text will be shown/hidden by a press of the button.

[Show/Hide Box 2]

Box 2: This text will be shown/hidden by a press of the button.

[Show/Hide Box 3]

Box 3: This text will be shown/hidden by a press of the button.

[Show/Hide Box 4]

Box 4: This text will be shown/hidden by a press of the button.