{htmltoggle:switch_state_1:code_1:switch_state_2:code_2:position:persistent_id}

Description

Builds an inline show/hide toggle: a link plus two HTML blocks, with only one block visible at a time. Clicking the link swaps the visible block and the link label. switch_state_1 / switch_state_2 are the two link labels (the tokens [+] and [-] become small show/hide images); code_1 / code_2 are the two HTML blocks (code_1 shown first). If both blocks are empty the expression returns nothing; if the two blocks are identical it renders a single always-visible block with no link. position can be top (default) or bottom to place the link before or after the content. An optional persistent_id (letters and hyphens) remembers the open/closed state across page loads via browser localStorage. The expression needs the AA JavaScript library (aajslib / aa-jslib), which it requests automatically. Because each instance uses a fresh random element id, the exact HTML differs on every render.

Parameters

switch_state_1 optional default [+] (only when both labels are empty)

Link text shown while the default block (code_1) is visible. The icon tokens [+] and [-] are turned into small show/hide images. If you leave BOTH switch_state_1 and switch_state_2 empty, AA falls back to [+] / [-].

code_1 optional default (empty string)

HTML shown by default, before any click (the first toggleclass div). May be empty - a common pattern is an empty code_1 and the real content in code_2, so the block starts collapsed.

switch_state_2 optional default [-] (only when both labels are empty)

Link text shown while the alternative block (code_2) is visible. [+] and [-] become show/hide images here too.

code_2 optional default (empty string)

HTML shown after clicking the link (the second toggleclass div, hidden by default). If code_1 equals code_2 no link is rendered - just one always-visible div. If both code_1 and code_2 are empty the whole expression returns an empty string.

position optional default top

Where the toggle link sits relative to the two content blocks: top (link first) or bottom (link after the content). Any value other than bottom is treated as top.

persistent_id optional default (empty string)

Optional identifier (letters and hyphens). When set, the open/closed state is remembered across page loads via the browser localStorage under this key, so a reader who expanded the block sees it expanded again next time.

Examples

virtual{htmltoggle:Show:Visible part:Hide:Extra detail}
Expected(a Show/Hide link and two toggleclass divs; the second hidden by default)
ActualShow
Visible part
A clickable link plus two divs - only one is shown at a time. Clicking the Show link reveals the Extra detail block and swaps the label to Hide. The element ids contain a random suffix (the command never caches), so the exact HTML differs on every render.
virtual{htmltoggle:Read more::Read less:The full answer goes here.}
Expected(a Read more link; the answer div is empty until clicked)
ActualRead more
Leave the default block (code_1) empty so the content starts collapsed; the answer appears only after clicking Read more. This is the common FAQ / read-more pattern.
virtual{htmltoggle:::::Hidden note}
Expected(a [+] / [-] image link toggling the Hidden note)
When both switch labels are empty AA falls back to [+] and [-], which it renders as small show/hide images. Here code_1 is empty and code_2 holds the note.
test[{htmltoggle:Show::Hide:}]
Expected[]
Actual[]
Both content blocks are empty here (code_1 and code_2 both empty), so there is nothing to toggle and the whole expression returns an empty string - the labels alone do not produce a link. This is the one deterministic case.
virtual{htmltoggle:Show:Visible part:Hide:Extra detail:bottom}
Expected(same as the basic toggle, but the link is emitted after the divs)
Actual
Visible part
Show
position=bottom puts the toggle link after the two content divs instead of before them. Any value other than bottom (including the empty default) keeps the link on top.
virtual{htmltoggle:Show:Visible part:Hide:Extra detail:top:faq-shipping}
Expected(toggle that re-opens on reload; state saved under localStorage key faq-shipping)
ActualShow
Visible part
Give a persistent_id (letters and hyphens) and the open/closed state is stored in the browser localStorage under that key, so the block reopens on the next page load. An inline script restores the state on load.
← All expressions