Table of Contents

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.

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.

<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>

Lorem Ipsum 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. More/Less…

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"