Accordions
Purpose
Accordions provide ways to expand and collapse content. This helps reduce the amount of information shown on a page and takes customers to the content they were looking for. Use accordions to organize related or additional information that isn’t required to complete a task.
Avoid nesting accordions within already collapsible content.
Requirements
The DLS accordion component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.
Collapsible Panels
Usage
Use the collapsible panel’s closed state to succinctly summarize information in a horizontal bar. Clicking any area on the bar expands it to reveal a larger area of information, and clicking it again collapses it. Collapsible panels open and close independently of each other within a larger stacked list.
Specs - Collapsible Panels - Desktop
Width = Defined by module width
Row Height = Single line of copy equals approximately 50px. If copy wraps, then the height will increase.
Glyph = Large, Gray 05
Icon = Small, Bright Blue, Outline (default), Filled (hover), Deep Blue, Filled (active)
Font = Body 1, Gray 06 (default), Deep Blue (active)
Row Color = White (default); Black, 5% opacity (hover), 10% opacity (active)
Bottom Rule = 1px, Gray 03 (for expanded content only)
Background Color = Gray 01 (for expanded content only), White (optional)
Class Name = .collapsible, .accordion-content, .collapsible-caret
Depending on the content displayed in the expanded panel, the background can alternatively be white.
Specs - Collapsible Panels - Mobile
Example - Collapsible Panels
<div class="border bordered dls-white-bg">
<h3 class="body-1">
<button id="accordion1" data-toggle="accordion" aria-expanded="false" class="collapsible icon-hover">
<span class="collapsible-caret"></span>
<i class="icon margin-1-r" data-dls-icon="hotel" data-dls-icon-size="sm" title="Hotel icon" data-dls-icon-variant="interactive" data-dls-icon-role="decorative"></i>
<span>Hotel</span>
</button>
</h3>
<div aria-labelledby="accordion1" class="accordion-content border-t dls-gray-01-bg display-none">
<div class="row pad stack-md-down">
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>The Hotel Collection from American Express</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Fine Hotels & Resorts™</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Small Luxury Hotels of the World™</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Starwood Preferred Guest® Complimentary Gold Status</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Fairmont President's Club Complimentary Platinum Status</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Club Carlson Complimentary Platinum Status</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Preferred Golf Complimentary Membership</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Hilton HHonors™ Complimentary Gold Status</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Luxury Villas & Hotels, Exotic Tours and Expert Guides</span></a>
</div>
</div>
</div>
<h3 class="body-1">
<button id="accordion2" data-toggle="accordion" aria-expanded="true" class="collapsible icon-hover">
<span class="collapsible-caret"></span>
<i class="icon margin-1-r" data-dls-icon="airplane" data-dls-icon-size="sm" title="Airplane icon" data-dls-icon-variant="interactive" data-dls-icon-role="decorative"></i>
<span>Air</span>
</button>
</h3>
<div aria-labelledby="accordion2" class="accordion-content border-t dls-gray-01-bg display-none">
<div class="row pad stack-md-down">
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 1</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 2</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 3</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 4</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 5</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 6</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 7</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 8</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 9</span></a>
</div>
</div>
</div>
<h3 class="body-1">
<button id="accordion3" data-toggle="accordion" aria-expanded="false" class="collapsible icon-hover">
<span class="collapsible-caret"></span>
<i class="icon margin-1-r" data-dls-icon="car" data-dls-icon-size="sm" title="Car icon" data-dls-icon-variant="interactive" data-dls-icon-role="decorative"></i>
<span>Car</span>
</button>
</h3>
<div aria-labelledby="accordion3" class="accordion-content border-t dls-gray-01-bg display-none">
<div class="row pad stack-md-down">
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 1</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 2</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 3</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 4</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 5</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 6</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 7</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 8</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 9</span></a>
</div>
</div>
</div>
<h3 class="body-1">
<button id="accordion4" data-toggle="accordion" aria-expanded="false" class="collapsible icon-hover">
<span class="collapsible-caret"></span>
<i class="icon margin-1-r" data-dls-icon="insurance" data-dls-icon-size="sm" title="Insurance icon" data-dls-icon-variant="interactive" data-dls-icon-role="decorative"></i>
<span>Insurance</span>
</button>
</h3>
<div aria-labelledby="accordion4" class="accordion-content border-t dls-gray-01-bg display-none">
<div class="row pad stack-md-down">
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 1</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 2</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 3</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 4</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 5</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 6</span></a>
</div>
<div class="col-md-4 stack">
<a href="#example" class="text-link display-block link-underlined"><span>Link 7</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 8</span></a>
<a href="#example" class="text-link display-block link-underlined"><span>Link 9</span></a>
</div>
</div>
</div>
</div>Collapsible Text
Usage
Collapsible text links are action-oriented text links that sit below the content, often by themselves. These are most commonly used to expand legal content such as Terms and Conditions.
Specs - Collapsible Text
Width = Defined by module width
Font = Body 1, Bright Blue
Text Format = Title case, left-aligned
Left and Right Padding = Responsive and aligns to gutter breakpoints, i.e. 20px on large
Bottom Rule = 1px, Gray 03 (for expanded content only)
Background Color = Gray 01 (for expanded content only)
Class Name = .toggle-close-link, .accordion-content
Example - Collapsible Text
Now earn 5X Membership Rewards® points for flights booked directly with airlines or with American Express Travel with the Platinum Card®.
You will get one point for each dollar charged for an eligible purchase in each billing period on your Platinum Charge Card from American Express. Eligible purchases are purchases for goods and services minus returns and other credits. Additional terms and restrictions apply. Merchants are assigned codes based on what they primarily sell. A purchase may not qualify for additional points if the merchant submits the purchase using a mobile or wireless card reader or if you use a mobile or digital wallet.
<div class="border-tb">
<div class="pad-2">
<p class="body-1 margin-b">
Now earn 5X Membership Rewards® points for flights booked directly with airlines or with American Express Travel with the Platinum Card®.
</p>
<button id="expandable1" class="btn-utility-wrapper toggle-button" data-toggle="accordion" aria-label="Show Details about rewards points" aria-expanded="false">
<span class="btn btn-tertiary btn-utility">Show Details</span>
</button>
</div>
<div aria-labelledby="expandable1" class="accordion-content">
<p class="pad dls-gray-01-bg margin-b">You will get one point for each dollar charged for an eligible purchase in each billing period on your Platinum Charge Card from American Express. Eligible purchases are purchases for goods and services minus returns and other credits. Additional terms and restrictions apply. Merchants are assigned codes based on what they primarily sell. A purchase may not qualify for additional points if the merchant submits the purchase using a mobile or wireless card reader or if you use a mobile or digital wallet.</p>
</div>
</div>Example - Inline Collapsible Text
What are Pending Charges?
Pending Charges are purchases or pre-authorizations that haven't been posted to your account yet. For example, a hotel may pre-authorize an amount at check in, then submit the final charge at check out. Only the final charge will increase your Total Balance or accrue interest.
<div>
<div class="pad-0">
<p class="body-1">
<strong>What are Pending Charges?</strong>
<button id="expandable2" class="btn-utility-wrapper toggle-button margin-1-l" data-toggle="accordion" aria-label="Hide Details about pending charges" aria-expanded="true">
<span class="btn btn-tertiary btn-utility">Hide Details</span>
</button>
</p>
</div>
<div aria-labelledby="expandable2" class="accordion-content">
<p>Pending Charges are purchases or pre-authorizations that haven't been posted to your account yet. For example, a hotel may pre-authorize an amount at check in, then submit the final charge at check out. Only the final charge will increase your Total Balance or accrue interest.
</p>
</div>
</div>Styles
| Class Name | Description |
|---|---|
.collapsible |
Styles the collapsible panel button. |
.collapsible-caret |
Styles the chevron that rotates to indicate whether the panel is opened or closed. |
.toggle-button |
Styles the button that toggles the content opened or closed to look like a text link. |
.accordion-content |
Styles the expandable content and transitions it opened or closed |
Functionality
If you are using dls.js, reference the attributes below for functionality.
| Attribute Name | Options | Description |
|---|---|---|
data-toggle |
accordion |
Creates an accordion object; required for functionality using dls.js. |
aria-expanded |
true/false |
Placed on the button; controls open and close of accordion content. |
aria-labelledby |
button id |
Placed on the accordion content; toggles open and close. |
data-expandable |
none |
Placed on an element to toggle open/close on click. |