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.

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">
  <a class="sprk-b-TypeBodyThree sprk-b-Link sprk-b-Link--standalone" data-sprk-toggle="trigger" href="#">
      <svg class="sprk-c-Icon sprk-u-mrs" data-sprk-toggle="icon" viewBox="0 0 448 512">
        <use xlink:href="#chevron-down"></use>
      </svg>
      My Disclaimer
  </a>

  <p class="sprk-b-TypeBodyFour sprk-u-pts sprk-u-HideWhenJs" data-sprk-toggle="content">
    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>
          
<sprk-toggle title="My Disclaimer" body="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." analyticsString="My Disclaimer">
</sprk-toggle>

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.
additionalClasses string Allows a string of classes to add, in addition to the Spark classes. Intended for overrides.
sparkdesignsystem@quickenloans.com