Accordion

The Accordion is a toggle control for displaying content or form elements within a closely related set.

Standard Accordion
- When to Use
- When Not to Use
Examples
Usage and Behaviors
Examples
- Single-Expand Accordion
  - When to Use
  - Additional Guidelines
Developer Notes
Right-to-Left Support
Accessibility Notes
- Accordion Header
- Accordion Content

Standard Accordion

By default, the Accordion allows multiple sections to expand at a time.

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Subheading

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

When to Use

When users are likely to need to compare content between categories.
When secondary or supplemental content needs to display in a limited amount of space.

When Not to Use

When content is important or critical. Keep this content exposed for quick and easy access.
If selections are used for navigation purposes, use the Panel Menu instead.

Examples

Standard Accordion (shown above)
Single-Expand Accordion

Usage and Behaviors

Always include either chevrons or radio buttons to indicate that Accordion headers are selectable.
When using an Accordion for forms, content sections with form elements that have returned errors should be expanded automatically. This keeps critical content exposed and allows users to resolve errors more quickly.

Examples

Single-Expand Accordion

The Accordion may be configured to limit the number of expanded sections to one.

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

When to Use

When users are likely to need to focus on a subset of content.

Additional Guidelines

When Accordion headers are mutually exclusive and expand a subset of related form elements, such as a Multiple Payment Options Accordion, use only radio buttons alongside the Accordion header labels. Chevrons should not be used in addition to radio buttons in this case, since radio buttons provide sufficient affordance. Radio buttons should only be used with forms.

Developer Notes

An Accordion is created using the class spark-accordion. It is then instantiated using new Spark.Accordion(el).

Each Accordion drawer is represented by a section with a class of spark-accordion__drawer, and consists of two primary parts: the content container, and header that controls the drawer. The content container can be identified by the spark-accordion__content class while the drawer headers are identified by a header tag with a class of spark-accordion__header.

<div class="spark-accordion">
  <section class="spark-accordion__drawer">
    <header class="spark-accordion__header" tabindex="0" aria-controls="example--unique-drawer-id" aria-expanded="false">...</header>
    <div class="spark-accordion__content" id="example--unique-drawer-id">...</div>
  </section>
</div>

The following options may be passed when using new Spark.Accordion(el, {});:

Name	Type	Default	Description
multiExpand	boolean	true	Determines whether or not more than one Accordion drawer may be open at any one time.
collapsible	boolean	true	Determines whether or not once an Accordion has been opened, if all the drawers may be closed again, or if at least one drawer should remain open.
radio	boolean	false	If not using the `spark-accordion--radio` class, you may define an Accordion as a Radio Accordion through this config.
onOpen	function	noop()	A callback function run when an Accordion drawer has finished opening.
onClose	function	noop()	A callback function run when an Accordion drawer has finished closing.

You may programmatically control Accordions with a series of methods that return a Promise. This enables you to better synchronize any callback actions to the appropriate point in an animation. For example, if you have a hidden message in your Accordion drawer content that you’d like to animate in once the drawer is open, you could utilize the returned Promise and chain your call to the open() method. The Promise will resolve at the exact point the Accordion’s animation has completed and hand off execution to your show message logic.

Accordions with chevrons may be controlled using open(), close(), and toggle() methods and passing the id of the spark-accordion__content as an argument. The Radio Accordions may be controlled using the select() method and passing the value for the radio input inside of the spark-accordion__header you want checked. Note that the value passed may be different from your spark-accordion__content id.

For all available methods and full API, refer to the component code on Bitbucket.

Standard Accordion

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-1" aria-expanded="true">
        <h4>Panel Heading 1</h4>
      </header>
      <div class="spark-accordion__content" id="multi-1">
        <h5>Subheading</h5>
        <p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-2" aria-expanded="false">
        <h4>Panel Heading 2</h4>
      </header>
      <div class="spark-accordion__content" id="multi-2">
        <h5>Subheading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-3" aria-expanded="false">
        <h4>Panel Heading 3</h4>
      </header>
      <div class="spark-accordion__content" id="multi-3">
        <h5>Subheading</h5>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
  </div>
</div>

<style type="text/css">
  
</style>

var accordionEl = document.querySelector('.spark-accordion');
var accordion = new Spark.Accordion(accordionEl);

Single-Expand Accordion

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-1" aria-expanded="true">
        <h4>Panel Heading 1</h4>
      </header>
      <div class="spark-accordion__content" id="single-1">
        <h5>Subheading</h5>
        <p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-2" aria-expanded="false">
        <h4>Panel Heading 2</h4>
      </header>
      <div class="spark-accordion__content" id="single-2">
        <h5>Subheading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-3" aria-expanded="false">
        <h4>Panel Heading 3</h4>
      </header>
      <div class="spark-accordion__content" id="single-3">
        <h5>Subheading</h5>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
  </div>
</div>


<style type="text/css">
  
</style>

var accordionEl = document.querySelector('.spark-accordion');
var accordion = new Spark.Accordion(accordionEl, {
  multiExpand: false
});

No-Collapse Accordion

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-no-collapse-1" aria-expanded="true">
        <h4>Panel Heading 1</h4>
      </header>
      <div class="spark-accordion__content" id="multi-no-collapse-1">
        <h5>Subheading</h5>
        <p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-no-collapse-2" aria-expanded="false">
        <h4>Panel Heading 2</h4>
      </header>
      <div class="spark-accordion__content" id="multi-no-collapse-2">
        <h5>Subheading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="multi-no-collapse-3" aria-expanded="false">
        <h4>Panel Heading 3</h4>
      </header>
      <div class="spark-accordion__content" id="multi-no-collapse-3">
        <h5>Subheading</h5>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
  </div>
</div>

<style type="text/css">
  
</style>

var accordionEl = document.querySelector('.spark-accordion');
var accordion = new Spark.Accordion(accordionEl, {
  collapsible: false
});

Single-Expand and No-Collapse Accordion

Subheading

Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Subheading

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-no-collapse-1" aria-expanded="true">
        <h4>Panel Heading 1</h4>
      </header>
      <div class="spark-accordion__content" id="single-no-collapse-1">
        <h5>Subheading</h5>
        <p>Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-no-collapse-2" aria-expanded="false">
        <h4>Panel Heading 2</h4>
      </header>
      <div class="spark-accordion__content" id="single-no-collapse-2">
        <h5>Subheading</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="single-no-collapse-3" aria-expanded="false">
        <h4>Panel Heading 3</h4>
      </header>
      <div class="spark-accordion__content" id="single-no-collapse-3">
        <h5>Subheading</h5>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cras mattis consectetur purus sit amet fermentum. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
      </div>
    </section>
  </div>
</div>

<style type="text/css">
  
</style>

var accordionEl = document.querySelector('.spark-accordion');
var accordion = new Spark.Accordion(accordionEl, {
  multiExpand: false,
  collapsible: false
});

Radio Accordion

A Radio Accordion is created using the class spark-accordion--radio. It is then instantiated using new Spark.Accordion(el). Alternatively, you may use the generic spark-accordion class but you would need to instantiate the component with the radio option: new Spark.Accordion(el, {radio: true});.

Credit Card Number

Expiration Date

CVV

Name on Card Save as default payment

Bank Name Routing Number Account Number

Phasellus cursus purus eu varius finibus. Praesent pretium nisi est, nec aliquet nulla sollicitudin eget. Maecenas lacinia mi in neque scelerisque.

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion--radio">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" aria-controls="credit--radio" aria-expanded="true">
        <label class="spark-radio">
          <input class="spark-radio__input" type="radio" name="example--payment" value="credit" checked>
          <span class="spark-radio__box"></span>
          <span class="spark-label">Credit Card</span>
        </label>
      </header>
      <div class="spark-accordion__content" id="credit--radio">
        <div class="container spark-pad-l-0 spark-pad-r-0">
          <div class="col-md-4 col-sm-12 spark-pad-l-0--lte-sm spark-pad-r-0--lte-sm spark-mar-b-2--lte-sm spark-pull-right--gte-md example--card-form__sign-in">
            <p><a href="#" class="spark-link--underline">Sign In</a> to pay with a card on file.</p>
          </div>
          <div class="col-md-8 spark-pad-l-0 spark-pad-r-0--lte-sm example--card-set">
            <div class="spark-payment--card-set">
              <label class="spark-payment--card-number">
                <div aria-hidden="true" class="spark-payment__card-type"><i class="spark-icon-credit-card spark-icon--fill spark-icon--md"></i></div>
                <input class="spark-input__field" name="number" type="phone" placeholder="0000 0000 0000 0000" role="textbox" data-novalidate>
                <span class="spark-label">Credit Card Number</span>
              </label>

              <div class="row spark-mar-b-1">
                <div class="col-xs-12 col-md-7 col-lg-8 spark-mar-b-1--lte-sm">
                  <label class="spark-payment--expiration">
                    <input class="spark-input__field" name="expiration" type="phone" minlength="7" pattern="(0[1-9]|1[0-2]) - \d\d" placeholder="MM - YY" role="textbox" data-novalidate>
                    <span class="spark-label">Expiration Date</span>
                  </label>
                </div>

                <div class="col-xs-12 col-md-5 col-lg-4 spark-pad-l-0--gte-md">
                  <label class="spark-payment--card-security-code">
                    <input class="spark-input__field" name="cvv" type="phone" role="textbox" minlength="3" maxlength="4" pattern="\d{3,4}" required data-novalidate>
                    <span class="spark-label">CVV</span>
                  </label>
                </div>
              </div>
            </div>

            <label class="spark-input">
              <input class="spark-input__field" name="name" type="text" role="textbox">
              <span class="spark-label">Name on Card</span>
            </label>

            <label class="spark-checkbox spark-mar-b-0">
              <input class="spark-checkbox__input" type="checkbox">
              <span class="spark-checkbox__box"></span>
              <span class="spark-label">Save as default payment</span>
            </label>
          </div>
        </div>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" aria-controls="bank--radio" aria-expanded="false">
        <label class="spark-radio">
          <input class="spark-radio__input" type="radio" name="example--payment" value="bank">
          <span class="spark-radio__box"></span>
          <span class="spark-label">Bank Transfer</span>
        </label>
      </header>
      <div class="spark-accordion__content" id="bank--radio">
        <label class="spark-select" id="bank--bank-transfer">
          <select class="spark-select__input">
            <option>Bank of America</option>
            <option>Chase</option>
            <option>Wells Fargo</option>
          </select>
          <span class="spark-label">Bank</span>
        </label>
        <label class="spark-input" id="name--bank-transfer">
          <input class="spark-input__field" name="name--bank-transfer" type="text" role="textbox">
          <span class="spark-label">Name</span>
        </label>
        <label class="spark-input" id="routing-number--bank-transfer">
          <input class="spark-input__field" name="routing-number--bank-transfer" type="text" role="textbox">
          <span class="spark-label">Routing Number</span>
        </label>
        <label class="spark-input" id="account-number--bank-transfer">
          <input class="spark-input__field" name="account-number--bank-transfer" type="text" role="textbox">
          <span class="spark-label">Account Number</span>
        </label>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" aria-controls="paypal--radio" aria-expanded="false">
        <label class="spark-radio">
          <input class="spark-radio__input" type="radio" name="example--payment" value="paypal">
          <span class="spark-radio__box"></span>
          <span class="spark-label">PayPal</span>
        </label>
      </header>
      <div class="spark-accordion__content" id="paypal--radio">
        <p>Phasellus cursus purus eu varius finibus. Praesent pretium nisi est, nec aliquet nulla sollicitudin eget. Maecenas lacinia mi in neque scelerisque.</p>
        <button class="spark-btn spark-btn--sm spark-pull-right">Continue</button>
      </div>
    </section>
  </div>
</div>

<div class="spark-popover example--popover">
  <div class="spark-popover__content">
    <a tabindex="0" class="spark-popover__close" title="Close"></a>
    <h3 class="example">CVV Security Code</h3>
    <img class="example" src="https://sabre-spark.s3.amazonaws.com/site_assets/images/ui_components/components/payments/cvv.png">
    <p class="example">Find the 3-digit<br/>security code on<br/>the back of your<br/>credit card, by the<br/>signature line, or<br/>on the front of<br/>your Amex card, by the card number.</p>
  </div>
</div>


<style type="text/css">
  
  .example--secure-checkout-button i {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  vertical-align: inherit;
}

.spark-popover__content h3.example {
  font-size: 1.67rem;
  font-weight: 300;
}

.spark-popover__content p.example {
  max-width: 267px;
  white-space: normal;
}

.spark-popover__content img.example {
  border-radius: 50%;
  display: inline-block;
  float: right;
  height: 120px;
  margin: 0 0 0 .5rem;
  width: 120px;
}

.example--btn-group {
  width: 100%;
}

  @media only screen and (min-width: 796px) {
  .spark-accordion--radio .example--card-form__sign-in {
    text-align: center;
  }
}


</style>

var accordionEl = document.querySelector('.spark-accordion--radio');
var accordion = new Spark.Accordion(accordionEl);

Right-to-Left Support

عنوان فرعي

هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد

عنوان فرعي

هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد

عنوان فرعي

هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد

<div class="col-xl-6 col-md-8 col-xs-12">
  <div class="spark-accordion" dir="rtl">
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="panel-1" aria-expanded="false">
        <h4>لوحة العنوان</h4>
      </header>
      <div class="spark-accordion__content" id="panel-1">
        <h5>عنوان فرعي</h5>
        <p>هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد</p>
      </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="panel-2" aria-expanded="false">
        <h4>لوحة العنوان</h4>
      </header>
      <div class="spark-accordion__content" id="panel-2">
        <h5>عنوان فرعي</h5>
        <p>هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد</p>
        </div>
    </section>
    <section class="spark-accordion__drawer">
      <header class="spark-accordion__header" tabindex="0" aria-controls="panel-3" aria-expanded="false">
        <h4>لوحة العنوان</h4>
      </header>
      <div class="spark-accordion__content" id="panel-3">
        <h5>عنوان فرعي</h5>
        <p>هذا هو النص المثال لأغراض العرض فقط. شرارة إلى الأبد</p>
      </div>
    </section>
  </div>
</div>

<style type="text/css">
  
</style>

var accordionEl = document.querySelector('.spark-accordion');
var accordion = new Spark.Accordion(accordionEl);

Accessibility Notes

To ensure that the Accordion component is fully functional and accessible to assistive technologies, it is important to provide additional attributes as discussed below.

Accordion Header

The spark-accordion__header element requires a tabindex attribute with the value set to 0 when using an Accordion with chevrons to allow the header to receive focus when navigating by keyboard. This element also requires an aria-controls attribute to indicate which Accordion drawer it controls, and an aria-expanded attribute with the value set to true or false depending on the desired starting state of the drawer controlled.

The h4 heading element used within the header can be adjusted to the desired heading element i.e. h1 - h6. This will be dependent on the hierarchy of your content headings.

<header class="spark-accordion__header" tabindex="0" aria-controls="example--unique-drawer-id" aria-expanded="true">
  <h4>Panel Heading 1</h4>
</header>

Accordion Content

The spark-accordion__content element requires an id attribute whose value should be the same as the value of the aria-controls attribute set on the Accordion header (and discussed) that is intended to control the drawer.

<div class="spark-accordion__content" id="example--unique-drawer-id">...</div>