Accordions

Code Examples

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.

Restrictions

  • The data-id property is provided as a hook for automated tools. If you have multiple instances of the same variant of a component on the same page, make sure each instance has a unique data-id property ("accordion-primary-1", "accordion-primary-2", "accordion-secondary-1", etc).

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 multiple HTML elements used for the content in an accordion item.

    • List Item One
    • List Item Two
    • List Item Three
  • 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="details-one" class="sprk-c-Accordion__summary" data-id="accordion-item-1" data-analytics="analytics_string_goes_here" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-c-Accordion__heading sprk-b-TypeBodyTwo">
          This is an accordion heading
        </h3>

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

    <div data-sprk-toggle="content" id="details-one">
      <div class="sprk-c-Accordion__content sprk-o-Stack sprk-o-Stack--medium">
        <p class="sprk-b-TypeBodyTwo sprk-o-Stack__item">
          This is an example of multiple HTML elements used for the content in an accordion item.
        </p>

        <ul class="sprk-b-List sprk-b-List--indented sprk-o-Stack__item">
          <li>
            List Item One
          </li>

          <li>
            List Item Two
          </li>

          <li>
            List Item Three
          </li>
        </ul>
      </div>
    </div>
  </li>

  <li class="sprk-c-Accordion__item" data-sprk-toggle="container">
    <a aria-controls="details-two" class="sprk-c-Accordion__summary" data-id="accordion-item-2" data-analytics="analytics_string_goes_here" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-c-Accordion__heading sprk-b-TypeBodyTwo">
          This is an accordion heading
        </h3>

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

    <div data-sprk-toggle="content" id="details-two">
      <div class="sprk-c-Accordion__content sprk-b-TypeBodyTwo">
        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.
      </div>
    </div>
  </li>

  <li class="sprk-c-Accordion__item" data-sprk-toggle="container">
    <a aria-controls="details-three" class="sprk-c-Accordion__summary" data-id="accordion-item-3" data-analytics="analytics_string_goes_here" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <h3 class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading">
          This is an accordion heading
        </h3>

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

    <div data-sprk-toggle="content" id="details-three">
      <div class="sprk-c-Accordion__content sprk-b-TypeBodyTwo">
        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.
      </div>
    </div>
  </li>
</ul>
          
<sprk-accordion>
  <sprk-accordion-item title="This is a title" additionalClasses="sprk-u-mbs" idString="accordion-item-1" analyticsString="object.action.event">
    <p>This is some content.</p>
  </sprk-accordion-item>
  <sprk-accordion-item title="This is another title" idString="accordion-item-2" analyticsString="object.action.event">
    <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 idString string The value supplied will be assigned to the 'data-id' attribute on the accordion item. This is intended to be used as a selector for automated tools. This value should be unique per page.
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.