{htmlajaxtoggle:switch_state_1:code_1:switch_state_2:url:position}

Description

Builds an expand/collapse toggle. The first state is shown inline; the link switches to a second state whose HTML is fetched once by AJAX from a URL on the same server (the first time it is opened). Renders a togglelink anchor and two toggleclass divs (the second hidden until loaded), each carrying a random id so several toggles can coexist on one page. The page must load the AA JavaScript library (javascript/aajslib.php) for the AA_HtmlAjaxToggle handler. If both link labels are left empty they default to the plus/minus icons; position bottom puts the content divs before the link instead of after. Use htmltoggle when the second block is short and can ship inline; use this when it is large or expensive and should load on demand.

Parameters

switch_state_1 optional default (empty; with switch_state_2 empty becomes the [+] icon)

Label for the link in the default (collapsed) state, before the inline content is replaced. May contain the icon marker [+], which expands to the plus icon. If both switch_state_1 and switch_state_2 are empty, the labels default to the [+] and [-] icons.

code_1 optional default (empty)

HTML shown inline as the default (first) state, inside the first toggleclass div. This is the always-loaded summary; keep it short.

switch_state_2 optional default (empty; with switch_state_1 empty becomes the [-] icon)

Label for the link once the second state is open. May contain the icon marker [-], which expands to the minus icon. Defaults to the [-] icon when both labels are empty.

url optional default (empty)

Same-server URL whose response is fetched by AJAX and placed in the second div the first time the toggle is opened. Typically an AA view, e.g. /aadev/view.php?vid=NN. A cross-origin URL will not load. If empty, the second state opens empty.

position optional default top

Where the toggle link sits relative to the two content divs. top (the default) renders the link first, then the divs; bottom renders the divs first, then the link below them. Any value other than bottom is treated as top.

Examples

virtual{htmlajaxtoggle:Read more:Short summary shown inline.:Show less:/aadev/view.php?vid=143}

Expected(a togglelink labelled "Read more" + a toggle_1 div holding "Short summary shown inline." + an empty hidden toggle_2 div)

Inline summary plus a Read more link. On first click the detail is fetched from the view URL and revealed; the link label flips to Show less. The output is a togglelink anchor and two toggleclass divs with a random id, so it is illustrative rather than a fixed-string test.

virtual{htmlajaxtoggle:::::/aadev/view.php?vid=143}

Expected(link shows the plus icon image; toggling swaps it for the minus icon)

Actual

Leaving both label arguments empty makes the link use the built-in [+] (show) and [-] (hide) icons instead of text. Handy for a compact icon-only toggle.

virtual{htmlajaxtoggle:[+] details:Name and date.:[-] details:/aadev/view.php?vid=143}

Expected(link renders the plus icon followed by " details"; the summary div holds "Name and date.")

Actual

details

Name and date.

The [+] and [-] markers can be mixed into your own label text; each expands to the matching plus/minus icon image, so the link reads as an icon followed by a word.

virtual{htmlajaxtoggle:Show related items:Click to load the related list.:Hide:/aadev/view.php?vid=143}

Expected(togglelink "Show related items"; on first open the response of view.php?vid=143 is loaded into toggle_2)

ActualShow related items

Click to load the related list.

The url argument can point at any same-server AA view; its rendered output is fetched once and dropped into the hidden div. Use this to defer an expensive listing until the reader asks for it. Remember to load javascript/aajslib.php on the page so the AA_HtmlAjaxToggle handler exists.

virtual{htmlajaxtoggle:Show more:Summary line.:Show less:/aadev/view.php?vid=143:bottom}

Expected(toggle_1 and toggle_2 divs first, then the togglelink labelled "Show more" below them)

Actual

Summary line.

With position bottom the two content divs are emitted first and the toggle link is placed after them, so "Show more" appears beneath the summary. The default (top, or any other value) puts the link first.

← All expressions