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/