---json
{
    "page_id": "a8o0gu0qsdk1bueooj89i"
}
---

===== About =====
''toggle'' is an [[docs:animation:animation|animation]] that can:
  * hide (collapse) a component
      * automatically from a certain screen size 
      * or with a click action
  * display (expand) a component 
      * with a click action

The available control components (where the user can click) are:
  * a [[docs:content:link|link]] 
  * a [[docs:content:button|button]]
  * styled as:
      * any image (such as an [[:docs:content:icon|icon]]) 
      * or any text

<note>
This effect is also already automatically added:
  * in the [[docs:layout:component:accordion|accordion]]
  * in the [[docs:layout:component:tabs|tabs]]
  * in a [[docs:styling:dimension|constrained by height component]] (with the toggle scroll mechanism)
</note>

===== Example =====


==== Block ====
<webcode name="Default" frameborder="0">
<code dw>
<toggle light target-id="boxId" toggle-state="expanded">
    <expand><icon name="bi:arrows-expand"/> Expand</expand>
    <collapse><icon name="bi:arrows-collapse"/> Collapse</collapse>
</toggle>
<box id="boxId" toggle-state="expanded">
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.
</box>
</code>
</webcode>
==== Text Toggle ====

<webcode name="Collapse" frameborder=0 >
<code dw>
<text>Lorem Ipsum
<itext id="collapsableTextId" toggle-state="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><toggle link target-id="collapsableTextId" toggle-state="collapsed"><expand>More ...</expand><collapse>< Less</collapse></toggle>
</text>
</code>
</webcode>

===== Syntax =====
This animation needs to set attributes:
  * on the target component to toggle (ie collapse or expand)
  * and the control (link or button).


==== Control ====

On the control component (link or button), you give the component id to toggle via the ''toggleTargetId''
<code dw>
<toggle 
    type="primary|secondary|success|danger|warning|info|light|dark|link"
    target-id="component-id-to-toggle" 
    toggle-state="collapsed|expanded"
>
    <collapse>Collapse</collapse>
    <expand>Expand</expand>
</toggle>
</code>
where:
  * [[:docs:styling:type|type]] is the [[:docs:content:button|button]] type (Default is no styling to be able to use a icon).
  * ''target-id'' is the ''id'' of the [[#target|target]]
  * ''toggle-state'' is the initial state of the toggle. Possible values: 
      * ''collapsed'': the target is hidden (default)
      * ''expanded'': the target is visible
      * ''none'': the element will never collapse (used to cancel the [[#Automatic Side Slot Toggle]])


==== Target ====
On the component to toggle
   * you need to identify it by giving an unique value with the ''id'' attribute
   * and its initial state.
<code dw>
<component id="componentId"  toggle-state="collapsed|expanded"></component>
</code>
  * ''target-id'' is the ''id'' of the [[#target|target]]
  * ''toggle-state'' is the initial state of the component. (This value should be the same than on the [[#toggle]]) Possible values: 
      * ''collapsed'': the component is hidden
      * ''expanded'': the component is visible


===== How to toggle automatically based on screen size ? =====

''toggle-state'' allows [[:docs:styling:breakpoint|breakpoint prefix]] such as
<code dw>
<component toggle-state="collapsed md-expanded" />
</code>
The target component will then be: 
  * ''collapsed'' on small device
  * and ''expanded'' in medium device. (You can't collapse it anymore)