{htmltogglecss:switch_state_1:switch_state_2:css_rule:is_on}

Description

Builds a small show/hide toggle. It outputs an anchor link that, when clicked, reveals or hides every page element matching a CSS selector, and switches its own label between two texts (for example Show details / Hide details). Use it for collapsible detail panels, FAQ answers, or read-more sections. The matched element(s) should start hidden with style display:none, unless is_on is 1. The page must load AAs aajslib.php so the toggle helper AA_HtmlToggleCss is available. Because the link needs a unique id each time, the output is never cached and differs on every render. An empty css_rule prints nothing. For AJAX-loaded panels use htmlajaxtogglecss; to switch between two full HTML blocks use htmltoggle.

Parameters

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

Link text shown while the target is hidden (the closed state) - for example Show details. The special tokens [+] and [-] are replaced by AAs plus/minus icon images. If you leave both switch_state_1 and switch_state_2 empty, the command uses [+] / [-] by default.

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

Link text shown while the target is visible (the open state) - for example Hide details. The [+] / [-] icon tokens work here too. Defaults to [-] only when both switch texts are left empty.

css_rule required

A CSS selector matching the element(s) to show and hide - an id (#id82422), a class (.details), or a compound rule (#my-page div.details). All matching elements toggle together. Required: with an empty css_rule the whole expression prints nothing. The matched element should start hidden (style=display:none) unless is_on is 1.

is_on optional default 0

Set to 1 when the target is visible by default, so the link starts in the open state (it gets the is-on class and shows switch_state_2). Any other value, or omitting it, keeps the target hidden and starts on switch_state_1.

Examples

virtual{htmltogglecss:Show details:Hide details:#offer-details}
ExpectedShow details (the XXXXXX id is random per render)
The simplest form: a link reading Show details that reveals the element with id offer-details, and switches to Hide details when open. The target element should start with style=display:none. switch_state_1 is the link text while hidden, switch_state_2 the text while shown.
virtual{htmltogglecss:[+]:[-]:.extra-info}
Expectedshow (the [+] / [-] tokens expand to the plus.gif / minus.gif icon images)
show (the [+] / [-] tokens expand to the plus.gif / minus.gif icon images)">Actualshow
The [+] and [-] tokens are replaced by AAs built-in plus.gif / minus.gif icon images, giving the classic plus/minus disclosure control. If you leave both switch texts empty the command falls back to these same [+] / [-] icons automatically.
virtual{htmltogglecss:Show all answers:Hide answers:.faq-answer}
ExpectedShow all answers (every .faq-answer element toggles together)
Show all answers (every .faq-answer element toggles together)">ActualShow all answers
A CSS class rule (.faq-answer) matches every element with that class, so one link expands or collapses a whole group at once - handy for an FAQ list or a set of detail rows. The rule can be any CSS selector: an id (#box), a class (.faq-answer), or a compound rule (#faq div.answer).
virtual{htmltogglecss:Read more:Read less:#bio:1}
ExpectedRead less (starts on the open state)
Read less (starts on the open state)">ActualRead less
With is_on set to 1 the target starts visible, so the link is rendered already open: it carries the is-on class and shows switch_state_2 (Read less). The matched element must therefore NOT be hidden by default. With is_on omitted or 0 the link starts closed and shows switch_state_1 instead.
virtual{htmltogglecss:more:less:#detail_{_#SITEM_ID}}
Expectedmore (one independent toggle per listed item)
more (one independent toggle per listed item)">Actualmore
Inside a slice or view listing, build the css_rule from the items own id so each row gets its own independent toggle. Here _#SITEM_ID is the current items short id, producing a unique target like #detail_a1b2c3 for every row; pair it with a matching <div id=detail_{_#SITEM_ID} style=display:none> holding that rows detail.
test[{htmltogglecss:Show:Hide:}]
Expected[]
Actual[]
Guard behavior: with no css_rule there is nothing to show or hide, so the whole expression returns an empty string. The brackets here just frame the empty result.
← All expressions