Difference between revisions of "Template:Hidden"
m (Removed partial link and adjusted link color) |
|||
| (2 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | <includeonly>{{ #ifeq: {{{contentonly|no}}} | no | {{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | <!-- nothing --> | {{{header}}} }} }} | <!-- nothing --> }}<span role="button" class="mw-customtoggle-{{ {{{|safesubst:}}}#if: {{{id|}}} | {{{id}}} | {{CURRENTTIMESTAMP}} }} | + | <includeonly>{{ #ifeq: {{{contentonly|no}}} | no | {{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | <!-- nothing --> | {{{header}}} }} }} | <!-- nothing --> }}<span role="button" style="color: #0645ad" class="mw-customtoggle-{{ {{{|safesubst:}}}#if: {{{id|}}} | {{{id}}} | {{CURRENTTIMESTAMP}} }}>{{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | {{{header}}} | {{{label|⇅}}} }} | {{{label|⇅}}} }}</span>{{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | {{{header}}} | <!-- nothing --> }} }} | <!-- nothing --> }} | <!-- nothing --> }}{{ #ifeq: {{{labelonly|no}}} | no | <div data-expandtext="{{ #ifeq: {{{label|}}} | none | {{int:show}} | {{{label|⇅}}} }}" data-collapsetext="{{ #ifeq: {{{label|}}} | none | {{int:hide}} | {{{label|⇅}}} }}" class="mw-collapsible {{#ifeq: {{{state|collapsed}}} | collapsed | mw-collapsed| }} {{{contentclass|}}}" {{ #if: {{{contentcss|}}} | style={{{contentcss}}} | <!-- nothing --> }} id="mw-customcollapsible-{{ {{{|safesubst:}}}#if: {{{id|}}} | {{{id}}} | {{CURRENTTIMESTAMP}} }}">{{ #ifeq: {{{contentonly|no}}} | yes | {{{header|}}} | <!-- nothing --> }}<div class="mw-collapsible-content">{{ #if: {{{content|}}} | {{{content}}} | {{ #if: {{{2|}}} | <!-- nothing --> | {{{1|}}} }} }}</div></div>| <!-- nothing --> }}</includeonly><noinclude>__TOC__ |
== About == | == About == | ||
| Line 60: | Line 60: | ||
| {{tlc|hidden|id{{=}}last|contentonly{{=}}yes|label{{=}}none|content{{=}}Hidden text|contentclass{{=}}toccolours|contentcss{{=}}"overflow: auto;"}} {{pad}} || {{hidden|id=last|contentonly=yes|label=none|content=Hidden text|contentclass=toccolours|contentcss="overflow: auto;"}} || {{pad}} When you insert the content only, the toggle link is automatically generated from the javascript at the right, you can't control it. <br />{{pad}} To use the default text "show"/"hide", you can set {{tt|label}} to {{tt|none}}. | | {{tlc|hidden|id{{=}}last|contentonly{{=}}yes|label{{=}}none|content{{=}}Hidden text|contentclass{{=}}toccolours|contentcss{{=}}"overflow: auto;"}} {{pad}} || {{hidden|id=last|contentonly=yes|label=none|content=Hidden text|contentclass=toccolours|contentcss="overflow: auto;"}} || {{pad}} When you insert the content only, the toggle link is automatically generated from the javascript at the right, you can't control it. <br />{{pad}} To use the default text "show"/"hide", you can set {{tt|label}} to {{tt|none}}. | ||
|- | |- | ||
| − | | {{tlc|hidden|id{{=}}last2|contentonly{{=}}yes|label{{=}}none|content{{=}}Hidden text}} {{pad}} || | + | | {{tlc|hidden|id{{=}}last2|contentonly{{=}}yes|label{{=}}none|content{{=}}Hidden text}} {{pad}} || {{hidden|id=last2|contentonly=yes|label=none|content=Hidden text}} || {{pad}} Same as above, there is only the content and a default toggle link is generated unless you create your own link like below. |
| + | |- | ||
| + | | {{tlc|hidden|id{{=}}last2|label{{=}}click me!|labelonly{{=}}yes}} {{pad}} || {{hidden|id=last2|label=click me!|labelonly=yes}} || {{pad}} Custom link associated to the above hidden content. | ||
|} | |} | ||
</noinclude> | </noinclude> | ||
Latest revision as of 07:44, 9 June 2020
Contents
About
This is essentially a spoiler template. It allows you to hide a text which can be toggled with a link.
The template is based on jQuery.makeCollapsible.
Usage
{{hidden|id=(optional)|header=(optional)|label=⇅|labelpos=right|labelonly=no|content=(optional)|contentonly=no|contentclass=}}
| Parameter | Default value | Description |
|---|---|---|
id |
Optional unique id across the page. This is necessary to associate an hidden text to a specific toggle link. If no id provided, it will use the current unix timestamp.
| |
header |
Optional embded text. If label is defined as none, it will act as the toggle link. This can be useful if you need to insert a label at the left of the header. | |
label |
⇅ |
Optional label text to act as the toggle link. Use none value to explicitly disable it.
|
labelpos |
right |
Optional label position. Values can be either left or rightThis is only useful if you need to show the label at the left of the header.
|
labelonly |
no |
if yes, it will insert only a label as toggle link. This is useful if you need to separate the hidden content from the toggle link, see contentonly.
|
content |
Optional hidden text. | |
contentonly |
no |
if yes, it will insert only the hidden content. This is useful if you need to sperate the toggle link from the hidden content, see labelonly.This also can be used to tell the template to not use a custom toggle link and therefore allowing a default link (from the jquery library) to be automatically inserted at the top right of the content. |
contentclass |
Optional for additional class(es) around the content. | |
contentcss |
Optional for additional styles around the content. | |
state |
collapsed |
Whether the hidden content by default should be collapsed or expanded.
|
Examples
| You type | You get | Comment |
|---|---|---|
{{hidden|Hidden text}} |
⇅ Hidden text |
Only hidden text, without id. It should show only the default label. |
Hello World! {{hidden|Hidden text}} |
Hello World! ⇅ Hidden text |
Same as above. If you have multiple templates without id, any toogle links will work on all associated hidden texts. |
{{hidden|id=42|content=Hidden text}} |
⇅ Hidden text |
With id. The behavior is the same as above. |
Hello World! {{hidden|id=42|content=Hidden text}} |
Hello World! ⇅ Hidden text |
With id. The behavior is the same as above. |
{{hidden|id=h1|header=Embded text|content=Hidden text}} |
Embded text ⇅ Hidden text |
Useful unless you need to change the label position or you want that header to be the toggle link. |
{{hidden|id=h2|header=Embded text|labelpos=left|content=Hidden text}} |
⇅ embded text Hidden text |
Changing label position to the left. |
Random text {{hidden|id=lab1|label=(toggle)|content=Hidden text}} |
Random text (toggle) Hidden text |
Changing the label name. |
{{hidden|id=lab2|label=<nowiki[toggle]</nowiki|header=Random text||labelpos=left|content=Hidden text}} |
[toggle] Random text Hidden text |
Changing the label name and its position to the left. |
{{hidden|id=li|header=Lorem Ipsum|label=none|content=Hidden text}} |
Lorem Ipsum Hidden text |
Making embded text as the toggle link. |
{{hidden|id=last|contentonly=yes|label=none|content=Hidden text|contentclass=toccolours|contentcss="overflow: auto;"}} |
Hidden text |
When you insert the content only, the toggle link is automatically generated from the javascript at the right, you can't control it. To use the default text "show"/"hide", you can set label to none.
|
{{hidden|id=last2|contentonly=yes|label=none|content=Hidden text}} |
Hidden text |
Same as above, there is only the content and a default toggle link is generated unless you create your own link like below. |
{{hidden|id=last2|label=click me!|labelonly=yes}} |
click me! | Custom link associated to the above hidden content. |
