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

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>

Animated variation

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>

Mobile toggle variation

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>

Button variation

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 @marquee on the #astridd Slack channel.

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.