Difference between revisions of "Template:Hidden"

From AlliedModders Wiki
Jump to: navigation, search
m (Removed partial link and adjusted link color)
 
Line 1: Line 1:
<includeonly>{{ #ifeq: {{{contentonly|no}}} | no | {{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | <!-- nothing --> | {{{header}}}&nbsp; }} }} | <!-- nothing --> }}<span role="button" class="mw-customtoggle-{{ {{{|safesubst:}}}#if: {{{id|}}} | {{{id}}} | {{CURRENTTIMESTAMP}} }} plainlinks">[//: {{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | {{{header}}} | {{{label|⇅}}} }} | {{{label|⇅}}} }}]</span>{{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | &nbsp;{{{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__
+
<includeonly>{{ #ifeq: {{{contentonly|no}}} | no | {{ #if: {{{header|}}} | {{ #ifeq: {{{label|⇅}}} | none | <!-- nothing --> | {{ #ifeq: {{{labelpos|right}}} | left | <!-- nothing --> | {{{header}}}&nbsp; }} }} | <!-- 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 | &nbsp;{{{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 ==

Latest revision as of 08:44, 9 June 2020

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 right
This 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.