Difference between revisions of "Template:Hidden begin/sandbox"

From blackwiki
Jump to navigation Jump to search
imported>Psantora
(revert... I can't seem to fix this. when the hide/show links are on the right, they will go ALL THE WAY to the right, even over images and tables...)
Line 4: Line 4:
 
       toggle=left, so format [hide/show] link on lefthand side:
 
       toggle=left, so format [hide/show] link on lefthand side:
 
       -------------------------------------------------------------
 
       -------------------------------------------------------------
       --><div class="NavFrame collapsed" style="width:100%; position:relative; border:{{{border|none}}};"><!--
+
       --><div class="NavFrame {{#if:{{{expanded|}}}||collapsed}}" style="width:100%; position:relative; border:{{{border|none}}};"><!--
 
           --><div class="NavHead" style="width:2.8em; background:transparent; position:absolute;"></div><!--
 
           --><div class="NavHead" style="width:2.8em; background:transparent; position:absolute;"></div><!--
 
           --><div style="height:1.6em; background:transparent; text-align:left; padding-left:2.3em; font-size:100%; font-weight:bold; {{{titlestyle|}}}"><!--
 
           --><div style="height:1.6em; background:transparent; text-align:left; padding-left:2.3em; font-size:100%; font-weight:bold; {{{titlestyle|}}}"><!--
Line 13: Line 13:
 
       toggle/=left, so format [hide/show] link on righthand side:
 
       toggle/=left, so format [hide/show] link on righthand side:
 
       -------------------------------------------------------------
 
       -------------------------------------------------------------
       --><div class="NavFrame collapsed" style="border:{{{border|none}}};"><!--
+
       --><div class="NavFrame {{#if:{{{expanded|}}}||collapsed}}" style="border:{{{border|none}}};"><!--
 
           --><div class="NavHead" style="background:{{{bg1|transparent}}}; text-align:{{{ta1|left}}}; {{{extra1|}}} {{{titlestyle|}}}"><!--
 
           --><div class="NavHead" style="background:{{{bg1|transparent}}}; text-align:{{{ta1|left}}}; {{{extra1|}}} {{{titlestyle|}}}"><!--
 
                   <!--(deprecated:)-->{{{header|}}}<!----> {{{title|}}}&nbsp;</div><!--
 
                   <!--(deprecated:)-->{{{header|}}}<!----> {{{title|}}}&nbsp;</div><!--
Line 21: Line 21:
  
  
-->{{documentation|Template:Hidden begin-end/doc}}
+
-->{{documentation}}
  
 
<!--- Please add metadata to the <includeonly> section at the bottom of Template:Hidden begin-end/doc --->
 
<!--- Please add metadata to the <includeonly> section at the bottom of Template:Hidden begin-end/doc --->
 
</noinclude>
 
</noinclude>

Revision as of 21:30, 22 January 2013

Template documentation[view] [edit] [history] [purge]

Do not use this template to hide content in articles. This violates the WP:Manual of Style § Scrolling lists and collapsible content and WP:Accessibility guidelines. This template is intended for use in pages in namespaces other than the article namespace.

Note: This template does not hide anything for mobile users (phab:T111565).

Syntax

{{Hidden begin
| expanded = <!--"true", "on", yes", etc, otherwise omit-->
| showhide = <!--"left", otherwise omit-->
| class = 
| style = 
| border =
| title = 
| titlestyle = 
| bg1 = 
| ta1 = 
| contentstyle = 
| bg2 = 
| ta2 = 
<!--Older, semi-deprecated parameters:-->
| header = | extra1 = | extra2 = 
}}
<!----[content to be hidden placed here]---->
{{Hidden end}}

Parameters

Parameter Description
showhide Set to "left" (without speechmarks) to switch the [show/hide] link's position from the righthand end of the titlebar (default) to the left.
expanded Set to anything ("true", "yes", etc.) to switch the hidden section's initial state from collapsed (hidden) to expanded (visible).
class Class attribute affecting entire area.
style CSS styling affecting entire area (titlebar and hidden/hideable content).
border CSS styling for border around entire area. Will be overridden by any border styles in style.
title Text shown in titlebar.
titlestyle CSS styles to apply to the titlebar (e.g. |titlestyle=border:1px solid lightgrey; to produce a border around it; |titlestyle=background:color; to set its background color to color ; |titlestyle=text-align:[center/right]; to switch its text (title)'s alignment from left to center or right; etc.).
bg1 Background color for titlebar; defaults to transparent. May be overridden if titlestyle includes anything that changes the background.
ta1 Text alignment for titlebar; defaults to left. May be overridden if titlestyle includes anything that changes the text alignment.
contentstyle  CSS styling to apply to the hidden/hideable content (e.g. background and text-align, per titlestyle).
bg2 Background color for content; defaults to transparent. May be overridden if contentstyle includes anything changes the background.
ta2 Text alignment for content; defaults to left. May be overridden if contentstyle includes anything that changes the text alignment.

Examples

Example 1

 {{Hidden begin |title=Default example}}
 * def
 * ghi
 {{Hidden end}}

Example 2

 {{Hidden begin
 | titlestyle = background:pink;
 | title = ''titlestyle'' is "background:pink;"
 }}
 * def
 * ghi
 {{Hidden end}}

Example 3

 {{Hidden begin
 | titlestyle = background:pink;
 | title = added "ta1=center"
 | ta1 = center
 }}
 * def
 * ghi
 {{Hidden end}}

Example 4

 {{Hidden begin
 | titlestyle = background:pink; text-align:right; padding-right:3.0em;
 | title = ''title'' on right with 3.0em padding
 }}
 * change window width and
 * watch title alignment
 {{Hidden end}}

Example 5

 {{Hidden begin |showhide=left |expanded=true
 | titlestyle = background:palegreen;
 | title = ''showhide'' set to "left" and ''expanded'' set to "true"
 }}
 * def
 * ghi
 {{Hidden end}}

Example 6

{{Hidden begin |showhide=left
| titlestyle = background:palegreen;
| title = <code style="background:transparent;">showhide=left</code>, hidden content 150% size and in bold (''contentstyle'')
| contentstyle = font-size:150%; font-weight:bold;
}}
* def
* ghi
{{Hidden end}}

Example 7

{{Hidden begin
| header = [''header'' (deprecated)]
| titlestyle = font-style:italic; padding-right:3.0em;
| title = [''title'' set to this text]
| border = 1px solid grey
| bg1 = palegreen
| ta1 = right
| extra1 = font-size:120%; <!--semicolon required since titlestyle is used-->
| extra2 = font-size:150% <!--semicolon optional when contentstyle not used-->
}}
* make window narrower and
* title will wrap
{{Hidden end}}

Example 8

{{Hidden begin
| titlestyle =
| title = title&nbsp;with&nbsp;non-breaking&nbsp;spaces&nbsp;
| border = 1px solid red
| bg1 = cyan
| bg2 = yellow
| ta1 = right
| ta2 = left
| extra1 = font-size:120%; padding-right:2.5em;
| extra2 = font-size:150%; padding-left:3.0em;
}}
* def ... these should have left padding
* ghi
{{Hidden end}}

See also