Deprecated - toggleTargetId

About

The toggleTargetId is deprecated for the toggle component that allows to define a custom control for the toggle state.

Example

Toggle from a button

A button that will expand and collapse a card with the help of collapse attribute.

<button toggleTargetId="cardId">
Click Me to Expand and re-click me to Collapse
</button>
<card id="cardId" collapsed>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</card>

where the following attributes are mandatory:

• on the control element (the element to click)
  • toggleTargetId=“cardId” defines the id of the element to collapse. In this case, cardId
• on the target element (the element to collapse)
  • collapsed will collapse the block
  • id=“cardId” is the id of the card component and is the same value than the toggleTargetId value of the button.

Toggle from a link

<text>Lorem Ipsum
<itext id="collapsableTextId" collapsed>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</itext> [[?toggleTargetId=collapsableTextId#|More/Less...]]
</text>

Syntax

This animation needs to set attributes on the component to toggle and the control (link or button).

• On the component to toggle
  • you need to identify it by giving an unique value with the id attribute
  • and optionally its initial state to collapsed. (Without this attribute, a component is visible)

id="componentId" collapsed

• On the control component (link or button), you give the component id to toggle via the toggleTargetId

toggleTargetId="componentIdToToggle"