Expand & Collapse

Expand/collapse allows users to toggle between displaying and hiding a section of content.

Inline Example

Panel heading

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.


When to Use

  • Use an expand/collapse treatment to progressively display content in order to streamline complex displays and reveal additional content only when the user needs or requests it.

Variations

  • Inline (shown above)
  • Panel

Variations

Panel Example

Expand/collapse panels are variations of the panel pattern and allow users to open and close entire panels of content.

Panel Heading

Integer vehicula mattis est nec tempor. Fusce scelerisque eros nulla, feugiat commodo quam condimentum nec. Nunc nec dignissim odio, eget laoreet nisi. Proin iaculis velit sit amet tortor viverra, in dictum justo bibendum. Fusce congue nulla id ipsum finibus varius. Aenean at eleifend mauris.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.


Additional Guidelines

  • Do not include actionable elements (buttons, links, etc.) within the heading/arrow area of the panel. This area should be reserved for expanding and collapsing

Developer Notes

Inline Content

Panel heading

Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<div class="spark-panel spark-panel--card col-xs-12 col-sm-6">
  <div class="spark-panel__content spark-expand">
    <h3>
      Panel heading
    </h3>
    <p>
      Donec tincidunt vitae magna non ultricies. Maecenas sed mauris imperdiet, rhoncus mauris eget, eleifend ex. Donec turpis enim, interdum et ullamcorper nec, hendrerit eget libero. Maecenas dictum laoreet venenatis. Nulla nulla velit, semper et hendrerit vitae, gravida a tortor. In sed iaculis velit. Mauris dignissim maximus neque non luctus.
    </p>
    <p class="spark-expand__content">
      Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
    </p>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__hide--expanded">View More<span class="spark-expand__toggle-caret"></span></button>
    <button class="spark-btn spark-btn--text spark-expand__toggle spark-expand__show--expanded">View Less<span class="spark-expand__toggle-caret"></span></button>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-expand');
var expandInstance = new Spark.Expand(el);

// jQuery
$('.spark-expand').sparkExpand();

The expand/collapse pattern is implemented using the .spark-expand class. Content that should be shown or hidden depending on the expand state should be wrapped inside an element with a class of .spark-expand__content. Showing/hiding the content is handled by adding a class of .spark-expand__toggle to an element inside of the .spark-expand container.

It is possible to show and hide additional content based on the expanded or collapsed state. To hide content when expanded, add a class of .spark-expand__hide--expanded. Conversely, adding a class of .spark-expand__show--expanded will show an element when expanded. This is best used to create two separate buttons for expanding and collapsing the content.

This component requires the use of the JavaScript component to handle toggling the .expanded class. It can be instantiated using new Spark.Expand(el).

Panel Accordion

Panel Heading

Integer vehicula mattis est nec tempor. Fusce scelerisque eros nulla, feugiat commodo quam condimentum nec. Nunc nec dignissim odio, eget laoreet nisi. Proin iaculis velit sit amet tortor viverra, in dictum justo bibendum. Fusce congue nulla id ipsum finibus varius. Aenean at eleifend mauris.

Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim. 

<div class="spark-panel spark-panel--expand">
  <div class="spark-panel__header" role="heading" tabindex="0">
    <h4>Panel Heading</h4>
  </div>
  <div class="spark-panel__content">
    <p>
Integer vehicula mattis est nec tempor. Fusce scelerisque eros nulla, feugiat commodo quam condimentum nec. Nunc nec dignissim odio, eget laoreet nisi. Proin iaculis velit sit amet tortor viverra, in dictum justo bibendum. Fusce congue nulla id ipsum finibus varius. Aenean at eleifend mauris.
    </p>
    <p>
      Duis elit laborum cupidatat do cillum nulla est culpa elit cillum culpa in culpa velit nisi commodo commodo sit Duis magna irure anim enim nisi mollit sit et enim adipisicing aute sed proident consequat proident ullamco consectetur fugiat dolore culpa deserunt veniam eu magna dolor proident tempor aliqua dolor officia enim.
    </p>
  </div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-panel--expand');
var expandInstance = new Spark.Expand(el);

// jQuery
$('.spark-panel--expand').sparkExpand();

A panel accordion component is a special instance of the expand/collapse pattern. It is created by adding a secondary class of .spark-panel--expand to an element with the .spark-panel class. By default, content contained in the .spark-panel__header will be the only thing visible. In order to function as a toggle to show/hide content, the header element must have a [role="heading"] or a class of .spark-expand__toggle. When the heading is clicked, and .expanded class will be added and the .spark-panel__body content will be shown.