Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.5)

Note

This page is archived under version 1.5 and is available for reference purposes only. The latest version of Pattern Library is 2.

Accordions

Basic Accordion

First Title

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia.

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia.

Aliquam tincidunt velit sit amet ante hendrerit tempus. Potenti et eros sed justo – commodo bibendum non at nunc. Fusce ac sodales magna. Suspendisse potenti cras molestie, risus a enim convallis vitae luctus libero lacinia. Cras molestie risus a enim ‘convallis vitae’ luctus libero lacinia.

Second Title

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Third Title - Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.

Fourth Title - Integer posuere erat a ante venenatis dapibus

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.



Code

The accordion pattern has the following dependencies:

  • Google Open Sans Font
  • Pattern Library icon stylesheet: cicon-style.css (found in cicon-package.zip above)
  • Pattern Library core stylesheet: coc-basic-style.css
  • jQuery: jquery-2.2.4.min.js
  • ui-components.js

<script>
    accordionUIOnly();
</script>

<div class="cui accordion container-fluid">
    <h3 class="title-bar">First Title</h3>
    <p>Content for first accordion.</p>

    <h3 class="title-bar">Second Title</h3>
    <p>Content for second accordion.</p>

    <h3 class="title-bar">Third Title</h3>
    <p>Content for third accordion</p>

    <h3 class="title-bar">Fourth Title</h3>
    <p>Content for fourth accordion</p>
</div><!-- End of .accordion -->

Usage

Use accordions to shorten pages and reduce scrolling. Requires users to interact with the accordions by clicking on the headings.

Use a heading tag (except for h1) for the title bar. Using any other tag will break the functionality.

Example:


<h2 class="title-bar">First Title</h2>
<h3 class="title-bar">First Title</h3>
<h4 class="title-bar">First Title</h4>
<h5 class="title-bar">First Title</h5>

Accessibility

Based on the ARIA works by Heydon Pickering http://heydonworks.com/practical_aria_examples/


Single Accordions

Dark version (default)

Aliquam tincidunt velit sit amet

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.


Light version

Aliquam tincidunt velit sit amet

Aliquam nisl enim… tristique tempus placerat at, posuere in lectus. Potenti et eros sed justo commodo bibendum non at nunc. Aliquam nisl enim, tristique tempus placerat at, posuere in lectus. Sed dapibus, lectus sit amet adipiscing egestas, mauris est viverra nibh, iaculis pretium sem orci aliquet mauris. Duis sagittis, est sit amet gravida tristique, purus lectus venenatis urna, id ‘molestie’ magna risus ut nunc. Donec tempus tempus tellus, ac lacinia turpis mattis ac. Curabitur consectetur; faucibus nisl ac varius.



Code

The accordion pattern has the following dependencies:

  • Google Open Sans Font
  • Pattern Library icon stylesheet: cicon-style.css (found in cicon-package.zip above)
  • Pattern Library core stylesheet: coc-basic-style.css
  • jQuery: jquery-2.2.4.min.js
  • ui-components.js

<script>
    accordionUIOnly();
</script>

<!-- Dark version (default) -->
<div class="cui accordion accordion-single">
    <h3 class="title-bar">Accordion title</h3>
    <p>Accordion content</p>
</div>

<!-- Light version -->
<div class="cui accordion accordion-single accordion-single-light">
    <h3 class="title-bar">Accordion title</h3>
    <p>Accordion content</p>
</div>

Usage

Use accordion to shorten pages and reduce scrolling. Requires users to interact with the accordion by clicking on the heading.

Use a heading tag (except for h1) for the title bar. Using any other tag will break the functionality.

Example:


<h2 class="title-bar">First Title</h2>
<h3 class="title-bar">First Title</h3>
<h4 class="title-bar">First Title</h4>
<h5 class="title-bar">First Title</h5>

Accessibility

Based on the ARIA works by Heydon Pickering http://heydonworks.com/practical_aria_examples/