Difference between revisions of "Template:CustomToggleButton"

From Pathfinder Wiki
en>DesignerThan
(remove the possibility to close/open multiple boxes with one button (it's a test to minimize the amount of #forargs used on the wiki) that feature isn't used so I remove it)
 
(One intermediate revision by the same user not shown)
Line 13: Line 13:
 
<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>
 
 
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>
 
<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>
 
 
{{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">
 
<b>Box 1: </b>This text will be shown/hidden by a press of the button.
 
</div>
 
{{CustomToggleButton|text=Show/Hide Box 2|name=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.
 
</div>
 
{{CustomToggleButton|text=Show/Hide Box 3|name=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.
 
</div>
 
{{CustomToggleButton|text=Show/Hide Box 4|name=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.
 
 
</div>
 
</div>
 
</translate>
 
</translate>
 
</noinclude>
 
</noinclude>
  
<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>
+
<includeonly><span>[<span class="mw-customtoggle-{{{name}}}" style="text-decoration: underline; color: blue; cursor: pointer;">{{{text|{{#switch:{{SUBPAGENAME}}|es=Mostrar/ocultar|fr=Afficher/Masquer|Show/Hide}}}}}</span>]</span></includeonly>

Latest revision as of 16:48, 17 March 2021

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.