Template:Show: Difference between revisions

Content deleted Content added

Inline

Revision as of 01:26, 20 December 2025

Usage

Standard block usage (floats toggle to the far right):

{{show
|text=The primary driver for the acquisition was the target's proprietary AI technology.
}}

Compact Usage

This version prevents the "jump" and keeps the link next to the text.

{{show
|compact=yes
|text=This text is short and the button stays close and aligned.
}}

Parameters

text: The content to be hidden/shown.
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 keep the toggle link next to the text and fix the "push down" alignment issue.
state: Set to "expanded" to have the text visible on page load.
style: Pass additional CSS styles directly.

Required CSS

Add this to your MediaWiki:Common.css to ensure the "more" link doesn't float away:

.mw-compact-toggle .mw-collapsible-toggle {
    float: none !important;
    display: inline-block !important;
    margin-left: 0.5em;
    vertical-align: top !important;
}

@@ Line 1: / Line 1: @@
-<includeonly><span class="mw-collapsible {{#ifeq:{{lc:{{{state|collapsed}}}}}|expanded||mw-collapsed}}" id="mw-customcollapsible-{{{id|1}}}" style="display:inline; {{{style|}}}">
+<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 ▾}}}"
-<span class="mw-collapsible-content" style="display:inline;">
+data-collapsetext="{{{collapsetext|less ▴}}}"
-{{{text|}}}<span class="mw-customtoggle-{{{id|1}}}" style="cursor:pointer; color:#0645ad; margin-left:0.5em; vertical-align:baseline; display:inline;">{{{collapsetext|less ▴}}}</span>
+style="{{#ifeq:{{{inline|}}}|yes|display:inline;}}{{#ifeq:{{{compact|}}}|yes|display:inline-block; vertical-align:top;}} {{{style|}}}">
-</span>
+<{{#ifeq:{{{inline|}}}|yes|span|div}} class="mw-collapsible-content" style="{{#ifeq:{{{inline|}}}|yes|display:inline;}}">
-</span><span class="mw-customtoggle-{{{id|1}}} mw-collapsible {{#ifeq:{{lc:{{{state|collapsed}}}}}|expanded|mw-collapsed|}}" id="mw-customcollapsible-{{{id|1}}}-btn" style="cursor:pointer; color:#0645ad; margin-left:0.5em; vertical-align:baseline; display:inline-block;">{{{expandtext|more ▾}}}</span></includeonly><noinclude>
+{{{text|}}}</{{#ifeq:{{{inline|}}}|yes|span|div}}>
+</{{#ifeq:{{{inline|}}}|yes|span|div}}></includeonly><noinclude>
 == Usage ==
+Standard block usage (floats toggle to the far right):
-To ensure the buttons "glue" to the end of the text, you must provide a unique '''id''' if using this more than once on a single page.
+<pre>
+{{show
+|text=The primary driver for the acquisition was the target's proprietary AI technology.
+}}
+</pre>
+== Compact Usage ==
+This version prevents the "jump" and keeps the link next to the text.
 <pre>
 {{show
-|id=bio1
 |compact=yes
-|text=This is a very long text that will span multiple lines. When it expands, the "less" button will stay right here at the end.
+|text=This text is short and the button stays close and aligned.
 }}
 </pre>
 == Parameters ==
+* '''text''': The content to be hidden/shown.
-* '''id''': (Required if multiple on one page) A unique name like "1", "2", "bio", etc.
-* '''text''': The content.
+* '''expandtext''': The text for the "show" link (Defaults to "more ▾").
-* '''expandtext''': Defaults to "more ▾".
+* '''collapsetext''': The text for the "hide" link (Defaults to "less ▴").
-* '''collapsetext''': Defaults to "less ▴".
+* '''inline''': Set to "yes" to use span tags.
-* '''state''': Set to "expanded" to show by default.
+* '''compact''': Set to "yes" to keep the toggle link next to the text and fix the "push down" alignment issue.
+* '''state''': Set to "expanded" to have the text visible on page load.
+* '''style''': Pass additional CSS styles directly.
+== Required CSS ==
+Add this to your [[MediaWiki:Common.css]] to ensure the "more" link doesn't float away:
+<pre>
+.mw-compact-toggle .mw-collapsible-toggle {
+    float: none !important;
+    display: inline-block !important;
+    margin-left: 0.5em;
+    vertical-align: top !important;
+}
+</pre>
 </noinclude>