{expandable:text:length:add:switch_state_1:switch_state_2}

Description

Shows text with a "more / less" toggle. If the text is longer than the length threshold, it renders a shortened version followed by a link that reveals the full text on click; a second link hides it again. When the text is shorter than the threshold no toggle is added and the text shows in full. Each call gets a fresh random element id, so the HTML differs on every render. The page must load the AA JavaScript library (aajslib) for the toggle to work. The empty-text and whitespace-only cases produce no output.

Parameters

text required default (empty)

The content to display. If it is longer than the length threshold, only a shortened part is shown until the reader clicks the toggle. Empty or whitespace-only text produces no output.

length optional default 49

Character threshold measured against the text with HTML tags removed. The toggle appears only when the text is longer than this; shorter text is shown in full with no toggle.

add optional default (empty)

Text appended after the shortened part (for example three dots) to signal that more text follows. Used only when the text is actually truncated; ignored for short text.

switch_state_1 optional default [+]

Label for the show-more link. The tokens [+], [-] and [*] are replaced with the plus, minus and loading icons. When left empty it defaults to the plus icon.

switch_state_2 optional default [-]

Label for the hide link shown next to the full text. The same [+], [-], [*] icon tokens apply. It defaults to the minus icon only when switch_state_1 is also left empty; if you set switch_state_1 but leave this empty, no hide link is rendered.

Examples

test[{expandable:}]

Expected[]

Actual[]

With no text the command returns nothing - the brackets show the empty result. There is no point in a toggle with no content.

test[{expandable: }]

Expected[]

Actual[]

The text is trimmed before the length check, so whitespace-only input also returns nothing.

test{expandable:Quarterly report summary:40}

ExpectedQuarterly report summary

Actual

Quarterly report summary

When the text is not longer than the length threshold (40 here) no toggle is added and the text is shown in full.

test{expandable:News from the field}

ExpectedNews from the field

Actual

News from the field

With only the text given, the length defaults to 49. This 19-character text is under the threshold, so it shows in full with no toggle.

test{expandable:Brief item:40:[truncated]}

ExpectedBrief item

Actual

Brief item

The add suffix is appended only when the text is actually shortened. Here the text is short, so add is ignored and the text shows unchanged.

virtual{expandable:The committee approved the new community garden proposal after a long debate:30:...:Read more:Show less}

Expected(a shortened div ending in ... Read more, and a hidden full-text div with Show less; ids vary per render)

Actual

The committee approved the new... Read more

Past the length threshold the command emits a shortened div with the add suffix and a Read more link, plus a hidden div with the full text and a Show less link. The element ids are randomised on each render, so this is illustrative, not a fixed test.

virtual{expandable:The committee approved the new community garden proposal after a long debate:30}

Expected(shortened text with a plus-icon show link and a hidden full-text div with a minus-icon hide link; markup varies per render)

Actual

The committee approved the new

With no switch labels the toggle uses the plus and minus icons ([+] and [-]), which expand to image tags. Output carries randomised ids and inline JavaScript, so it is illustrative rather than a fixed test.

← All expressions