Difference between revisions of "Template:CustomToggleButton"
From Pathfinder Wiki
DesignerThan (talk | contribs) |
DesignerThan (talk | contribs) |
||
| Line 10: | Line 10: | ||
::<nowiki></div></nowiki></p> | ::<nowiki></div></nowiki></p> | ||
</div> | </div> | ||
| − | {{CustomToggleButton|text={{#switch:{{SUBPAGENAME}}|es=Mostrar/ocultar|fr=Afficher/Masquer|Show/Hide}}| | + | {{CustomToggleButton|text={{#switch:{{SUBPAGENAME}}|es=Mostrar/ocultar|fr=Afficher/Masquer|Show/Hide}}|name1=1}} |
<div class="mw-collapsible" id="mw-customcollapsible-1"> | <div class="mw-collapsible" id="mw-customcollapsible-1"> | ||
This text will be shown/hidden by a press of the button. | This text will be shown/hidden by a press of the button. | ||
</div> | </div> | ||
| + | |||
| + | |||
| + | It is also possible to close multiple boxes with one button like that:<br> | ||
| + | <div class="toccolours"> | ||
| + | <p> | ||
| + | ::<nowiki>{{CustomToggleButton|text=Show/Hide all|name1=example-box-1|name2=example-box-2|name3=example-box-3|name4=example-box-4}}</nowiki><br> | ||
| + | ::<nowiki><div class="mw-collapsible" id="mw-customcollapsible-example-box-1"></nowiki><br> | ||
| + | ::::<nowiki><b>Box 1: </b>This text will be shown/hidden by a press of the button.</nowiki> | ||
| + | ::<nowiki></div></nowiki> | ||
| + | ::<nowiki><div class="mw-collapsible" id="mw-customcollapsible-example-box-2"></nowiki><br> | ||
| + | ::::<nowiki><b>Box 2: </b>This text will be shown/hidden by a press of the button.</nowiki> | ||
| + | ::<nowiki></div></nowiki> | ||
| + | ::<nowiki><div class="mw-collapsible" id="mw-customcollapsible-example-box-3"></nowiki><br> | ||
| + | ::::<nowiki><b>Box 3: </b>This text will be shown/hidden by a press of the button.</nowiki> | ||
| + | ::<nowiki></div></nowiki> | ||
| + | ::<nowiki><div class="mw-collapsible" id="mw-customcollapsible-example-box-4"></nowiki><br> | ||
| + | ::::<nowiki><b>Box 4: </b>This text will be shown/hidden by a press of the button.</nowiki> | ||
| + | ::<nowiki></div></nowiki></p> | ||
| + | </div> | ||
| + | |||
| + | {{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> | ||
| + | |||
</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> |
| − | {{{text|{{#switch:{{SUBPAGENAME}}|es=Mostrar/ocultar|fr=Afficher/Masquer|Show/Hide}}}}}</span>]</span></includeonly> | ||
Revision as of 00:29, 9 November 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}}
[Show/Hide all]
Box 1: This text will be shown/hidden by a press of the button.
Box 2: This text will be shown/hidden by a press of the button.
Box 3: This text will be shown/hidden by a press of the button.
Box 4: This text will be shown/hidden by a press of the button.
