Template:Detail

This is a helper template for using MediaWiki:DetailToggle.js functions, it allows to have arbitrary hidable content that can be toggled with (pseudo) buttons, with current states saved in browser's local storage.

Parameters

• target: property name for hidable elements, toggle-target-target will be used as a class and a local storage key; defaults to default
• button: set to generate a toggle button
  • default: hide or show, to hide or show hidable content by default; defaults to hide
  • show_style: button style when showing hidable content; defaults to cursor:pointer;color:#006cb0;
  • hide_style: button style when not showing hidable content; defaults to cursor:pointer;color:#006cb0;
  • show_text: button text when showing hidable content; defaults to Show details
  • hide_text: button text when not showing hidable content; defaults to Show details
• Without button parameter a class for hidable element will be generated
  • [[[1]]]: hidable content in a span element

Examples

Default

{{Detail|button=true}}
{{Detail|Hidden content}}

☑ Show details ☒ Show details

Hidden content

Custom property

{{Detail|button=true|target=example-custom-property}}
{{Detail|target=example-custom-property|Hidden content}}

☑ Show details ☒ Show details

Hidden content

Showing details by default

{{Detail|button=true|target=example-custom-default|default=show}}
{{Detail|Hidable content|target=example-custom-default}}

☑ Show details ☒ Show details

Hidable content

Custom hidable elements

{{Detail|button=true|target=example-custom-hidable-element}}
<div {{Detail|target=example-custom-hidable-element}}>Hidden content</div>

☑ Show details ☒ Show details

Hidden content

Table

{{Detail|button=true|target=example-row|default=show|show_text=Show row|hide_text=Show row (hidden)}}
{{Detail|button=true|target=example-column|show_text=Show column|hide_text=Show column (hidden)}}
{| class="wikitable"
|Normal row
|{{Detail|target=example-column}}|Hidden column
|- {{Detail|target=example-row}}
|Hidable row
|{{Detail|target=example-column}}|Hidden column
|}

☑ Show row ☒ Show row (hidden)

☑ Show column ☒ Show column (hidden)

Normal row	Hidden column
Hidable row	Hidden column

Additional classes

Instead of toggling visibility toggles can add and remove custom classes from targets.

☑ Blur image ☒ Blur image