Template:Hide: Difference between revisions

From Zelda Dungeon Wiki
Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
mNo edit summary
(Improved the show all/hide all button.)
Line 3: Line 3:
|~button=<span class="_togglegroup _toggle_initshow _toggle _toggler toggle-visible" style="display:none; {{{style|{{{showstyle|}}}}}}">{{{show|[show]}}}</span><span class="_toggle_inithide _toggle _toggler toggle-hidden" style="display:none; {{{style|{{{hidestyle|}}}}}}">{{{hide|[hide]}}}</span>
|~button=<span class="_togglegroup _toggle_initshow _toggle _toggler toggle-visible" style="display:none; {{{style|{{{showstyle|}}}}}}">{{{show|[show]}}}</span><span class="_toggle_inithide _toggle _toggler toggle-hidden" style="display:none; {{{style|{{{hidestyle|}}}}}}">{{{hide|[hide]}}}</span>
|~content=<div class="_toggle_inithide _toggle toggle-hidden" style="{{{style|{{{3|}}}}}}">{{{content|{{{2|}}}}}}</div>
|~content=<div class="_toggle_inithide _toggle toggle-hidden" style="{{{style|{{{3|}}}}}}">{{{content|{{{2|}}}}}}</div>
|~showall=<span class="_toggler_show-toggle-hidden _toggler_hide-toggle-visible" style="{{{style|{{{3|}}}}}}">{{{text|{{{2|[show all]}}}}}}</span>
|~all=<span class="_toggler_show-toggle-hidden _toggler_hide-toggle-visible _toggler-hideall _toggler-showall showall" style="{{{showstyle|}}}">{{{showtext|[show all]}}}</span><span class="_toggler_hide-toggle-hidden _toggler_show-toggle-visible _toggler-showall _toggler-hideall hideall" style="display:none; {{{hidestyle|}}}">{{{hidetext|[hide all]}}}</span>
|~hideall=<span class="_toggler_hide-toggle-hidden _toggler_show-toggle-visible" style="{{{style|{{{3|}}}}}}">{{{text|{{{2|[hide all]}}}}}}</span>
}}<noinclude>
}}<noinclude>
==Purpose==
==Purpose==
Line 36: Line 35:


{{clear}}
{{clear}}
====Special Buttons====
====Show All and Hide All====
There are two special buttons available that can affect all instances of the hide template on a page. One is ''show all'', that will show all instances of the hide template on a page, and the other is ''hide all'', which does the opposite.
There is a special button available that can affect all instances of the hide template on a page. It will open all instances of the hide template on the page, clicking it again will hide all of them.


Both have two ways to be used.
To use the button, you can just use:
*show all
{{Desc|Normal|~all}}
{{Desc|Normal|~showall|text|style}}
For more advanced handling, the following is available
::<div style="float:left; margin-right:20px"><pre>{{Hide|~showall|text=|style=}}</pre></div>
<div style="float:left; margin-right:20px"><pre>
{{Parameter|text|Text text displayed for the button|Optional|[show all]}}
{{Hide|~all|showtext=|showstyle=|hidetext=|hidestyle=}}</pre></div>
{{Parameter|style|Any styling options to apply to the button if desired.|Optional}}
{{Parameter|showtext|Text text displayed for the show all version of the button.|Optional|[show all]}}
{{clear}}
{{Parameter|showstyle|Any styling options to apply to the show all version of the button if desired.|Optional}}
*hide all
{{Parameter|hidetext|The text to show for the button to hide all the content again.|Optional|[hide all]}}
{{Desc|Normal|~hideall|text|style}}
{{Parameter|hidestyle|Any styling options to apply to the hide all version of the button if desired.|Optional}}
::<div style="float:left; margin-right:20px"><pre>{{Hide|~hideall|text=|style=}}</pre></div>
{{Parameter|text|This specifies the text of the link that shows the content that is initially hidden.|Optional|[hide all]}}
{{Parameter|style|Any styling options to apply to the button if desired.|Optional}}


{{clear}}
{{clear}}
Line 95: Line 91:
Basic show all and hide all buttons:
Basic show all and hide all buttons:
<div style="float:left; margin-right:20px"><pre>
<div style="float:left; margin-right:20px"><pre>
{{hide|~showall}} {{hide|~hideall}}
{{hide|~all}}
</pre></div>{{clear}}
</pre></div>{{clear}}
This results in:
This results in:
:{{hide|~showall}} {{hide|~hideall}}
:{{hide|~all}}
{{clear}}
{{clear}}
{{Cat|Formatting Templates}}</noinclude>
{{Cat|Formatting Templates}}</noinclude>

Revision as of 20:35, January 16, 2012

{{{1}}}

Purpose

This template allows easy hiding of text and other content.

Usage

To use this template, use either the standard format     {{Hide| content }} or the named parameter format:

{{Hide
|show=
|hide=
|content=
}}
  • show — This specifies the text of the link that shows the content that is initially hidden. (Optional - [show])
  • hide — This specifies the text of the link that switches the content back to being hidden. (Optional - [hide])
  • content — This specifies the content you want to be able to hide (Optional )

Advanced Usage

If this isn't enough, the template can be used in parts instead, for more flexible use within tables and div boxes. Advanced wiki-coding knowledge is suggested for using the hide template in this way.
For advanced usage, use this code:

{{hide|~button|show=[show]|hide=[hide]|style=}}
{{hide|~content|content=|style=}}

The button can be placed anywhere before {{hide|~begin}}. It will only affect the next instance of {{hide|~begin}}. Future instances require another button. The style parameter for the button is to add styling for the button's span tags. This parameter styles both the show and hide version of the button. To style each version of the button seperately, omit the style parameter and instead use the showstyle and hidestyle parameters to style the show and hide version of the button, respectively.
The style parameter on the content is to enter any styling directly in to the div for the content, in addition to any other styling you use outside of it. You can delete the show and hide parameters if you do not wish to change them from their defaults.

Note that you can also use images in place of text for the buttons. However, in order for them to function properly, the images must be set to link to nothing, instead of some other page or its own page.

Show All and Hide All

There is a special button available that can affect all instances of the hide template on a page. It will open all instances of the hide template on the page, clicking it again will hide all of them.

To use the button, you can just use:     {{Hide| ~all }} For more advanced handling, the following is available

{{Hide|~all|showtext=|showstyle=|hidetext=|hidestyle=}}
  • showtext — Text text displayed for the show all version of the button. (Optional - [show all])
  • showstyle — Any styling options to apply to the show all version of the button if desired. (Optional )
  • hidetext — The text to show for the button to hide all the content again. (Optional - [hide all])
  • hidestyle — Any styling options to apply to the hide all version of the button if desired. (Optional )

Example

To hide some text, use the following:

{{Hide|This is hidden text.}}

This results in:

This is hidden text.

Alternatively:

{{Hide|content=This is hidden text.}}

This results in:

This is hidden text.

To change what the buttons say:

{{Hide|show=[Unearth hidden secrets]|hide=[I'm done looking]|content=This is hidden text.}}

This results in:

This is hidden text.

An advanced example placing the template within a formatted table:

{| cellspacing="3" align="left" style="border: 2px solid blue; background-color: #transparent;"
|- valign="top"
| style="border: 2px solid blue; background-color: #white;padding-left: 6px;"|
<font size=3 color="black"><b>{{hide|~button|style=float:left;}}</b></font>:{{hide|~content|style=float:right;|content=This is hidden text.}}
|}

This results in:

:
This is hidden text.

Basic show all and hide all buttons:

{{hide|~all}}

This results in:

[show all]