Display Toggle

Overview

Display Toggle allows you to toggle whether content is shown or hidden using some form of toggle, and add animations to this transition. It can also be used to automatically hide content on mobile but show on desktop.

Examples

Default variation

Example
External Link 
<ul>
  <li>
    <a href="https://google.com">
      Trigger
    </a>
    <a role="button" class="is-active" data-display-toggle-target="default" data-myob-display-toggle>
      <svg role="img" class="icon icon-chevron-b icon--xxs">
        <title>Open/Close Menu</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
      </svg>
    </a>
    <ul data-display-toggle="default">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </li>
</ul>

Initially closed variation

By not including the is-active class on the toggle, the content is hidden initially.

Example
External Link 
<ul>
  <li>
    <a href="https://google.com">
      Trigger
    </a>
    <a role="button" data-display-toggle-target="closed" data-myob-display-toggle >
      <svg role="img" class="icon icon-chevron-b icon--xxs">
        <title>Open/Close Menu</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
      </svg>
    </a>
    <ul data-display-toggle="closed">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </li>
</ul>

Custom animation variation

You can set a custom animation using the data-anim property. Usage of animations listed in css/helpers/animation.scss is recommended.

Example
External Link 
<ul>
  <li>
    <a href="https://google.com">
      Trigger
    </a>
    <a role="button" data-display-toggle-target="animated" class="is-active" data-myob-display-toggle data-anim="fade">
      <svg role="img" class="icon icon-chevron-b icon--xxs">
        <title>Open/Close Menu</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
      </svg>
    </a>
    <ul data-display-toggle="animated">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </li>
</ul>

Hidden on mobile variation

You can have content that is hidden by default for mobile and shown by default for desktop, by adding the data-responsive attribute.

Example
External Link 
<ul>
  <li>
    <a href="https://google.com">
      Trigger
    </a>
    <a role="button" data-display-toggle-target="test" class="is-active" data-myob-display-toggle data-responsive>
      <svg role="img" class="icon icon-chevron-b icon--xxs">
        <title>Open/Close Menu</title>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/global/icon.svg#chevron-b"></use>
      </svg>
    </a>
    <ul data-display-toggle="test">
      <li>
        <a href="#">Link 1</a>
      </li>
      <li>
        <a href="#">Link 2</a>
      </li>
      <li>
        <a href="#">Link 3</a>
      </li>
    </ul>
  </li>
</ul>

Using a Button variation

Any element can be used as a toggle. Here, we are using a button element.

Example
External Link

Hidden content

<div>
  <button class="btn btn--primary" data-myob-display-toggle data-display-toggle-target="h4">Click to toggle</button>
  <h4 data-display-toggle="h4">Hidden content</h4>
</div>

Usage guidelines

We're so sorry, there are currently no usage guidelines for this component 😥

If you feel you can help out your fellow designers by creating usage guidelines for this component, please reach out to #cr-marquee on Slack.

Implementation guidelines

Name Class Attribute Description
Toggle Target data-display-toggle-target Set on the toggle element. This is an identifier that will be used to find the content to toggle.
Toggle Controller data-display-toggle Set on the content element(s). This is an identifier that will be used by the toggle to find the content to hide/show.
Initially shown .is-active Ensure the content is shown initially.
Responsive data-responsive Hide content by default on mobile and show it on desktop.
Animation data-anim data-anim-in data-anim-out Use to set custom animations for in and out. If only data-anim specified, -in and -out will be automatically prefixed to the class provided.