Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Toggle

Code Examples

Spark-Core

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.

Information

  • Toggles will look and function the same in all viewports.
  • Spark-Core's Toggle JS will take care of initially adding and adjusting the aria-expanded HTML attribute based on if the content is hidden or visible.
  • You can adjust the spacing between the trigger link and the content by changing the spacing utility class on the content to a different size.

Restrictions

  • Content that requires user interaction or consumption should not be housed within a Toggle.
  • If you need several Toggles in succession use the Accordion component instead.
  • Overall sizing of the Toggle should be dependent on type size, but should remain large enough to be tappable on a mobile device
  • Content length inside the Toggle does not have a limit, but shouldn't exceed a reasonable amount.
  • The title of the Toggle doesn't have a specific maximum length and can wrap if needed.
  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("toggle-1", "toggle-2", "toggle-3", etc).

Configurable Variables

Variable Default Description
$sprk-toggle-transistion-timing 0.3s ease The transition timing for the rotation of the icon when the toggle is opened.

Toggle

My Disclaimer

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>

Information

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.

Information

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.
sparkdesignsystem@quickenloans.com