Accordions
The Pattern Library accordion pattern is based on the ARIA works by Heydon Pickering http://heydonworks.com/practical_aria_examples/
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:
- 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
- coc-accordion-tabs.js
Note: coc-accordion-tabs.js must be included onto your page and accordionUIOnly(); must be called in order for the accordions to be styled.
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>
<script>
accordionUIOnly();
</script>
<div class="cui accordion">
<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>
Single accordion variant
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:
- 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
- coc-accordion-tabs.js
Note: coc-accordion-tabs.js must be included onto your page and accordionUIOnly(); must be called in order for the accordions to be styled.
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/coc-accordion-tabs.js"></script>
<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>