{htmlajaxtogglecss:switch_state_1:switch_state_2:css_rule_hide:url_of_text:css_rule_update}

Description

Builds a toggle link that shows and hides page element(s) matching a CSS rule, loading their content from a URL by AJAX on the first open. On the first click it fetches url_of_text, inserts it into the matched element, reveals it, and swaps the link to its second text; clicking again hides it (the loaded content is kept, so later toggles do not re-fetch). The optional fifth parameter lets the AJAX content land in a different element than the one shown and hidden - handy for tables, where you toggle a whole row but update only one cell. The css_rule_hide selector is required; without it the command outputs nothing. With both switch texts empty it falls back to the built-in [+] / [-] icons. The link runs the AA_HtmlAjaxToggleCss helper (provided by the bundled aa-jslib JavaScript, which must be loaded on the page) and the URL must be same-origin. The generated link id is random on every render, so this command is never cached. Compare with {htmltogglecss} (same show/hide, no AJAX load) and {htmlajaxtoggle} (AJAX into a fixed pair of divs rather than a CSS rule).

Parameters

switch_state_1 optional default empty (falls back to the [+] icon when switch_state_2 is also empty)

Text of the toggle link in its default (closed) state. Accepts plain text, HTML, or the icon shorthands [+] [-] [*] (plus, minus, loading images). If both switch states are left empty, the link uses the built-in [+] / [-] icons.

switch_state_2 optional default empty (falls back to the [-] icon when switch_state_1 is also empty)

Text of the link in its open state, shown after the panel is revealed. Same formats as switch_state_1. Left empty together with switch_state_1, the link uses the built-in [+] / [-] icons.

css_rule_hide required default empty (no selector means the command outputs nothing)

CSS selector matching the element(s) the link shows and hides - for example #panel, .details, or a descendant rule like #main div.details. This is the required core of the command: with no css_rule_hide the command returns an empty string.

url_of_text optional default empty (the panel is shown/hidden but no content is loaded)

URL fetched by AJAX on the first click and inserted into the matched element. It must be on the same server (same-origin). A typical value is an AA view, e.g. /aadev/view.php?vid=33. The content loads once and is then cached on the link for subsequent toggles.

css_rule_update optional default same as css_rule_hide

Optional CSS selector for the element(s) that receive the loaded content, when that is different from the element being shown/hidden. Useful for tables: toggle a whole row with css_rule_hide while updating only an inner cell with css_rule_update.

Examples

virtual{htmlajaxtogglecss:Show details:Hide details:.detail-box:/aadev/view.php?vid=143}
Expecteda togglelink anchor (random id toggle_link_XXXXXX) calling AA_HtmlAjaxToggleCss(...), link text "Show details"
ActualShow details
A toggle link that, on first click, AJAX-loads the URL into the .detail-box element, reveals it, and swaps the link text to the second state. Clicking again hides it. The id toggle_link_XXXXXX is random per render (this command is never cached), so the example is illustrative, not asserted.
virtual{htmlajaxtogglecss:::.more-info:/aadev/view.php?vid=143}
Expecteda togglelink anchor whose visible label is the built-in plus icon (and minus when open)
Actualshow
When both switch-state texts are left empty, the link falls back to the built-in [+] and [-] icons (rendered as small plus/minus images). Only the third (css_rule_hide) and fourth (url) parameters are required for a working toggle.
virtual{htmlajaxtogglecss:Detail:Close:#row-7:/aadev/view.php?vid=143:#row-7 td.body}
Expecteda togglelink anchor passing hide rule #row-7 and a separate update rule #row-7 td.body to AA_HtmlAjaxToggleCss(...)
ActualDetail
The optional fifth parameter css_rule_update aims the AJAX content at a different element than the one shown/hidden. Here the whole table row #row-7 is toggled, but only its td.body cell receives the loaded content. Without the fifth parameter, update and hide target the same element.
test[{htmlajaxtogglecss:Show:Hide::/aadev/view.php?vid=143}]
Expected[]
Actual[]
Without a css_rule_hide (third parameter) there is nothing to show or hide, so the command returns an empty string - the surrounding brackets are left empty. A working toggle always needs at least the css rule and the url.
virtual{htmlajaxtogglecss:Read more:Read less:.extra:/aadev/view.php?vid=143}
Expecteda togglelink anchor (random id) calling AA_HtmlAjaxToggleCss(...) on selector .extra, link text "Read more"
ActualRead more
A class selector (.extra) lets a single toggle link reveal or hide every matching element on the page at once. Any CSS selector accepted by the browser works: an id (#box), a class (.extra), or a descendant rule (#main .extra).
← All expressions