Toggles have a clickable link and icon pair that show or hide a block of content. Use a Toggle when you need a simple way of showing, hiding and breaking down lengthy content. When the page loads, the Toggle icon and link are shown, but the content is hidden. When the icon or link are clicked the content will then be revealed.
Variable | Default | Description |
---|---|---|
$sprk-toggle-transistion-timing | 0.3s ease | The transition timing for the rotation of the icon when the toggle is opened. |
This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
<div
data-sprk-toggle="container"
data-id="toggle-1"
>
<a
class="sprk-b-TypeBodyThree sprk-b-Link sprk-b-Link--has-icon sprk-b-Link--simple"
data-sprk-toggle="trigger"
href="#"
>
<svg
class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--toggle sprk-u-mrs"
data-sprk-toggle="icon"
viewBox="0 0 64 64"
>
<use xlink:href="#chevron-down-circle-two-color"></use>
</svg>
My Disclaimer
</a>
<div data-sprk-toggle="content">
<p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-pbs">
This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
</p>
</div>
</div>
<sprk-toggle
title="My Disclaimer"
analyticsString="My Disclaimer"
idString="toggle-1"
>
<p class="sprk-b-TypeBodyFour">
This is some copy for the toggle about toggle things.
</p>
</sprk-toggle>
<SprkToggle
title="My Disclaimer"
analyticsString="toggle-1"
>
<p className="sprk-b-TypeBodyFour sprk-u-pts sprk-u-pbs">
This is an example of disclaimer content. The aria-expanded="true" attribute will be viewable in the DOM on the toggle link when this content is shown. When this content is hidden the aria-expanded attribute will have the value of false. This helps accessibilty devices in understanding that the link is a control for expandable content.
</p>
</SprkToggle>
See below for available customization options:
Input | Type | Description |
---|---|---|
title | string | The value supplied will be rendered as the main toggle link text. |
body | string | The value supplied will be rendered as the toggle body content that appears after a click. |
analyticsString | string | The value supplied will be assigned to the 'data-analytics' attribute on the toggle link. Intended for an outside library to capture data. |
iconClass | string | The value supplied will be assigned as a CSS class on the icon used in the toggle. |
titleFontClass | string | The value supplied will be assigned as a CSS class on the clickable title text used in the toggle. |
additionalClasses | string | Allows a string of classes to add, in addition to the Spark classes. Intended for overrides. |
idString | string | The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page. |
See below for available customization options:
Prop | Type | Description |
---|---|---|
children | node | The content for the toggle. |
idString | string | The value supplied will be assigned to the 'data-id' attribute on the component. This is intended to be used as a selector for automated tools. This value should be unique per page. |
additionalClasses | string (space-delimited values) | Allows a string of classes to add, in addition to the SprkToggle classes. Intended for overrides. |
titleAddClasses | string (space-delimited values) | Allows a string of classes to add to the title in SprkToggle. Intended for overrides. |
isDefaultOpen | boolean | The addition of this prop makes the toggle content open by default. |
analyticsString | string | The value supplied to this will used for the data-analytics attribute on the title anchor. |
title | string | The title text for the toggle. |
iconAddClasses | string (space-delimited values) | Allows a string of classes to add to the icon, in addition to the SprkToggle classes. Intended for overrides. |
toggleIconName | string | The name of the icon to use for the toggle if you do not want the default icon. |