Difference between revisions of "Template:CustomToggleButton"
From Pathfinder Wiki
DesignerThan (talk | contribs) |
en>DesignerThan |
||
| Line 15: | Line 15: | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
It is also possible to close multiple boxes with one button like that:<br> | It is also possible to close multiple boxes with one button like that:<br> | ||
<div class="toccolours"> | <div class="toccolours"> | ||
| Line 34: | Line 31: | ||
::::<nowiki><b>Box 4: </b>This text will be shown/hidden by a press of the button.</nowiki> | ::::<nowiki><b>Box 4: </b>This text will be shown/hidden by a press of the button.</nowiki> | ||
::<nowiki></div></nowiki></p> | ::<nowiki></div></nowiki></p> | ||
| + | </div> | ||
| + | <br> | ||
| + | <div class="warningbox"> | ||
| + | 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. | ||
</div> | </div> | ||
{{CustomToggleButton|text=Show/Hide all|name1=example-box-1|name2=example-box-2|name3=example-box-3|name4=example-box-4}} | {{CustomToggleButton|text=Show/Hide all|name1=example-box-1|name2=example-box-2|name3=example-box-3|name4=example-box-4}} | ||
| + | {{CustomToggleButton|text=Show/Hide Box 1|name=example-box-1}} | ||
<div class="mw-collapsible" id="mw-customcollapsible-example-box-1"> | <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. | <b>Box 1: </b>This text will be shown/hidden by a press of the button. | ||
| − | </div> | + | </div> |
| + | {{CustomToggleButton|text=Show/Hide Box 2|name=example-box-2|}} | ||
<div class="mw-collapsible" id="mw-customcollapsible-example-box-2"> | <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. | <b>Box 2: </b>This text will be shown/hidden by a press of the button. | ||
| − | </div> | + | </div> |
| + | {{CustomToggleButton|text=Show/Hide Box 3|name=example-box-3}} | ||
<div class="mw-collapsible" id="mw-customcollapsible-example-box-3"> | <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. | <b>Box 3: </b>This text will be shown/hidden by a press of the button. | ||
| − | </div> | + | </div> |
| + | {{CustomToggleButton|text=Show/Hide Box 4|name=example-box-4}} | ||
<div class="mw-collapsible" id="mw-customcollapsible-example-box-4"> | <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. | <b>Box 4: </b>This text will be shown/hidden by a press of the button. | ||
</div> | </div> | ||
| − | |||
</translate> | </translate> | ||
</noinclude> | </noinclude> | ||
| − | <includeonly><span>[<span class="mw-customtoggle-{{ | + | <includeonly><span>[<span class="{{#forargs: name | key | value | <nowiki /> mw-customtoggle-{{#var: value}}}}" style="text-decoration: underline; color: blue; cursor: pointer;">{{{text|{{#switch:{{SUBPAGENAME}}|es=Mostrar/ocultar|fr=Afficher/Masquer|Show/Hide}}}}}</span>]</span></includeonly> |
Revision as of 21:53, 2 December 2020
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>
- {{CustomToggleButton|text=Show/Hide text|name=example-box}}
[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>
- {{CustomToggleButton|text=Show/Hide all|name1=example-box-1|name2=example-box-2|name3=example-box-3|name4=example-box-4}}
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.
