Navigation
Getting Started
Fundamentals
Components
Utilities
Documentation

Accordions

Code Examples

Spark-Core

An Accordion is a simple way of showing, hiding and breaking down content. It should be used when a large group of related content needs to be separated into smaller, digestible chunks. An Accordion consists of a series of Toggle components.

Information

  • Content length inside the Accordion does not have a limit.
  • Title content of the Accordion can wrap, but it is recommended that it is short and to the point.
  • Accordions take up 100% width of their parent container until they hit their max width of 850px.

Primary Accordion

A Primary Accordion should be used when content needs to be broken down, but is still important enough to be of primary interest on the page. This Accordion's design is used to give it some visual weight within the design and make it apparent that the content is important.

Angular

The Accordion component in spark-core-angular consists of two Angular components:

  • sprk-accordion
  • sprk-accordion-item

The component expects you to put sprk-accordion-item components inside it. Any other content will render, but is not supported. The sprk-accordion-item component should at a minimum, have a title input and should contain the content to be toggled. By default, toggles are rendered closed.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. 

<ul class="sprk-c-Accordion sprk-o-VerticalList ">
  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>
</ul>
          
<sprk-accordion>
  <sprk-accordion-item title="This is a title" additionalClasses="sprk-u-mbs">
    <p>This is some content.</p>
  </sprk-accordion-item>
  <sprk-accordion-item title="This is another title">
    <p>This is some more content.</p>
  </sprk-accordion-item>
</sprk-accordion>

Information

See below for available customization options:

Component Input Type Description
sprk-accordion-item title string The value supplied will be rendered inside the title area of the accordion.
sprk-accordion-item analyticsString string The value supplied will be assigned to the 'data-analytics' attribute on the accordion item. Intended for an outside library to capture data.
sprk-accordion-item isOpen boolean The accordion item will use this to decide if the toggle state is open or closed. Intended to modify the default render state. (Interacting with the toggle will override this input.)

sprk-accordion

sprk-accordion-item

 additionalClasses string Allows a string of classes to add, in addition to the spark classes. Intended for overrides.

Secondary

The Secondary Accordion is used to break up content into more digestible chunks, but does not carry as much importance within the overall layout as the Primary Accordion.

Angular

The secondary variant uses the same component structure as primary. See the options table below for how to set the secondary variant style.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.

  • This is an accordion heading

    This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. 

<ul class="sprk-c-Accordion sprk-o-VerticalList  sprk-c-Accordion--secondary">
  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>

  <li class="sprk-c-Accordion__item " data-sprk-toggle="container">
    <a aria-controls="details1" class="sprk-c-Accordion__summary " data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyOne sprk-c-Accordion__heading ">
          This is an accordion heading
        </h3>

        <svg class="sprk-c-Icon sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 448 512">
          <use xlink:href="#chevron-down"></use>
        </svg>
    </a>

    <p id="details1" class="sprk-c-Accordion__details  sprk-b-TypeBodyTwo sprk-u-HideWhenJs" data-sprk-toggle="content">
      This is an example of accordion content. This is an example of accordion content. This is an example of accordion content. This is an example of accordion content.
    </p>
  </li>
</ul>
          
<sprk-accordion>
  <sprk-accordion-item title="This is a title" accordionType="secondary" additionalClasses="sprk-u-mbs">
    <p>This is some content.</p>
  </sprk-accordion-item>
  <sprk-accordion-item title="This is another title">
    <p>This is some more content.</p>
  </sprk-accordion-item>
</sprk-accordion>

Information

The options available for the primary variant are also available for secondary. See below for available customization options:

Input Type Description
accordionType string If set to 'secondary' will render the accordion in the secondary variant style.
sparkdesignsystem@quickenloans.com