Toggle

Code Examples

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

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

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.