|
<includeonly><{{#ifeq:{{{inline|}}}|yes|span|div}} class="mw-collapsible {{#ifeq:{{lc:{{{state|collapsed}}}}}|expanded||mw-collapsed}} {{#ifeq:{{{compact|}}}|yes|mw-compact-toggle|}}"
data-expandtext="{{{expandtext|more ▾}}}"
style="{{#ifeq:{{{inline|}}}|yes|display:inline;}}{{#ifeq:{{{compact|}}}|yes|display:inline;}} {{{style|}}}">
data-collapsetext="{{{collapsetext|less ▴}}}"
style="{{#ifeq:{{{compactstyle|}}}|yes|">
<div class="mw-collapsible-content">
<span class="mw-collapsible-toggle mw-compact-show" style="cursor:pointer; color:#0645ad;" role="button" tabindex="0">{{{expandtext|more ▾}}}</span>
|}}
<{{#ifeq:{{{inline|}}}|yes|span|div}} class="mw-collapsible-content" style="{{#ifeq:{{{inline|}}}|yes|display:inline;}}">
{{{text|}}}
{{#ifeq:{{{compact|}}}|yes|
</ {{#ifeq:{{{inline|}}}|yes|span|div }}></includeonly><noinclude> ▼ <span class="mw-collapsible-toggle mw-compact-hide" style="cursor:pointer; color:#0645ad;" role="button" tabindex="0">{{{collapsetext|less ▴}}}</span>
|}}
A simple collapsible block for hiding/showing content.
</{{#ifeq:{{{inline|}}}|yes|span|div}}>
▲</{{#ifeq:{{{inline|}}}|yes|span|div}}></includeonly><noinclude>
Standard block usage (floats toggle to the far right):
<pre>
{{show
</pre>
== CompactCustom UsageLabels ==
To change the "more" and "less" buttons:
This version keeps the link inline at the natural end of the text.
<pre>
{{show
|expandtext=Read Bio
|compact=yes
|collapsetext=Close
|text=This text is short and the button stays close and aligned.
|text=John Doe has been the CEO since 2010...
}}
</pre>
* '''expandtext''': The text for the "show" link (Defaults to "more ▾").
* '''collapsetext''': The text for the "hide" link (Defaults to "less ▴").
* '''inline''': Set to "yes" to use span tags.
* '''compact''': Set to "yes" to use the inline run-in toggle style.
* '''state''': Set to "expanded" to have the text visible on page load.
* '''style''': Pass additional CSS styles directly to the container.
[[Category:Generic templates]]
== Required CSS ==
Add this to your [[MediaWiki:Common.css]]:
<pre>
/* Compact Toggle Logic */
/* 1. When expanded, hide the 'Show' link */
.mw-collapsible:not(.mw-collapsed) .mw-compact-show {
display: none !important;
}
/* 2. When collapsed, the 'Hide' link is naturally hidden because
its parent (.mw-collapsible-content) is hidden by MW default CSS. */
/* Optional: Ensure pointer cursor if inline styles are stripped */
.mw-compact-show, .mw-compact-hide {
cursor: pointer;
}
</noinclude>
|