Template:Collapse top: Difference between revisions
Creating template that acts as collapsible text box |
Enabling aligning collapsible boxes to the left |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div style="margin-left:{{{indent|0}}}"><!-- NOTE: width renders incorrectly if added to main STYLE section --> | <div style="margin-left:{{{indent|0}}};"><!-- NOTE: width renders incorrectly if added to main STYLE section --> | ||
{| <!-- Template:Collapse top --> class="mw-collapsible {{<includeonly>safesubst:</includeonly>#if:{{{expand|{{{collapse|}}}}}}||mw-collapsed}} {{{class|}}}" style="background: {{{bg2|#F8F9FA}}}; text-align: left; border: {{{border|1px}}} solid {{{b-color|Silver}}}; margin: 0.2em auto auto; width:{{<includeonly>safesubst:</includeonly>#if:{{{width|}}}|{{{width}}}|100%}}; clear: {{{clear|both}}};" | {| <!-- Template:Collapse top --> class="mw-collapsible {{<includeonly>safesubst:</includeonly>#if:{{{expand|{{{collapse|}}}}}}||mw-collapsed}} {{{class|}}}" style="background: {{{bg2|#F8F9FA}}}; text-align: left; border: {{{border|1px}}} solid {{{b-color|Silver}}}; margin: 0.2em auto auto; width:{{<includeonly>safesubst:</includeonly>#if:{{{width|}}}|{{{width}}}|100%}}; clear: {{{clear|both}}};" align="{{<includeonly>safesubst:</includeonly>#if:{{{align|}}}|left|center}}" | ||
|- | |- | ||
! style="background: {{{bg|#EDEEEF}}}; font-size:87%; padding:0.2em 0.3em; text-align:{{<includeonly>safesubst:</includeonly>#if:{{{left | ! style="background: {{{bg|#EDEEEF}}}; font-size:87%; padding:0.2em 0.3em; text-align:{{<includeonly>safesubst:</includeonly>#if:{{{left|}}}|left|center}}; {{<includeonly>safesubst:</includeonly>#if:{{{fc|}}}|color: {{{fc}}};|}}" | <div style="display:inline;font-size:115%">{{{1|{{{title|{{{reason|{{{header|{{{heading|{{{result|Collapsible box title}}}}}}}}}}}}}}}}}}</div> | ||
|- | |- | ||
| style="padding: {{{padding|0.2em}}};" {{<includeonly>safesubst:</includeonly>!}}<noinclude> | | style="padding: {{{padding|0.2em}}};" {{<includeonly>safesubst:</includeonly>!}}<noinclude> | ||
Sample text | Sample text | ||
{{Collapse bottom}} | {{Collapse bottom}} | ||
{{Documentation|Template:Collapse top/doc}} | |||
</noinclude> | </noinclude> | ||
Latest revision as of 22:50, 11 July 2021
Collapsible box title
|
|---|
|
Sample text |
| Template documentation follows |
|---|
| Note: the template above may sometimes be partially or fully invisible. |
| Visit Template:Collapse_top/doc to edit this documentation. (How does this work?) |
Usage
Place {{collapse top}} and {{collapse bottom}} around the text to be collapsed. For example:
{{collapse top|title=This is the title text}}
Sample contents text
{{collapse bottom}}
produces:
This is the title text
|
|---|
|
Sample contents text |
{{collapse bottom}} should always be placed on its own line.
Parameters
This template takes the following parameters, all of which are optional. They are case-sensitive. Those that take CSS measurements require them in CSS format (e.g. 1em not 1 em).
|title= or first unnamed parameter will give the collapsed box a title, which occurs on the same line as the show link and is always visible. It defaults to "Collapsible box title".
|left=yes will align the title along the left margin. By default, the title text is centered.
|expand=yes will leave the material uncollapsed with the border and coloring. Default is to collapse the material.
|bg= sets the background color of the title box. Defaults to #EDEEEF. Named colors are listed at wikipedia:List of colors
|fc= sets the font color of the title of the collapsible bar. Defaults to inheriting the current text color of the context. See |bg=, above, for details on color options.
|border= sets the width of the border line on the collapsed material. Defaults to 1px.
|b-color= sets the border color. Defaults to Silver (#C0C0C0). See |bg=, above, for details on color options.
|padding= sets the padding (distance from borders) on the collapsed material inside the colored area. Defaults to 0.6em.
|width= sets the width of the overall template relative to the page (or a block element containing the collapse box). This should virtually always be given as a percentage, e.g. |width=50%, or in relative em units, e.g. |width=30em. Pixel-based values should be avoided, as they are effectively meaningless – the result will be different depending on each user's browser and local CSS settings (which browser and operating system it is, zoom level, font sizes, etc.).
|bg2= sets the background color of the box that appears when template is expanded. Defaults to #F8F9FA. See |bg=, above, for details on color options.
|indent= indents the box from the left of the page. Defaults to no indentation.
|clear= In some situations you may not want the default clear: both; CSS to apply, which puts the collapse box below any left- or right-floated content within the same HTML block. In this case, you can use |clear=none, |clear=right, or |clear=left, as needed.
Examples
- Adding a box title (if omitted, default is 'Extended content') –
{{collapse top|This is the title text}}
This is the title text
|
|---|
|
Sample text here |
- Aligning box title along left margin –
{{collapse top|left=true}}
Collapsible box title
|
|---|
|
Sample text here |
- Changing background color –
{{collapse top|bg=#CCFFCC}}
Collapsible box title
|
|---|
|
Sample text here |
- Adding extra padding –
{{collapse top|padding=5em}}
Collapsible box title
|
|---|
|
Sample text here |
- Archiving a section: the markup below:
{{collapse top}}
==Section header==
Sample contents text
{{collapse bottom}}
must be rewritten as:
{{collapse top|Section header}}
Sample contents text
{{collapse bottom}}
The end result:
Section header
|
|---|
|
Sample contents text |
