Accordions

Data Elements

A simple but elegant user interface (UI) component that allows users to reveal and hide information. Individual parts of an accordion include a clickable title, an icon that signals interactivity, and a pane or drawer of information that is either hidden or revealed on focus. Accordion drawers may be single or stacked.

How to use
Specifications

Use Cases:

Conserve vertical space on a page by concealing non-essential text.
Break up long paragraphs of text and enable users to quickly scan for content that is relevant to them.
Write clear and concise accordion headings that describe the nature of the hidden content.

Avoid:

Hiding essential information or calls to action in accordion drawers. If the content within the accordion is necessary for users to make informed decisions or take specific actions, it is best to display it directly rather than hiding it.

Accessiblity:

Torch WDS accordions are coded with ARIA tags to ensure that they are accessible to screen readers and other assistive devices.
For those concerned about search engine optimization (SEO) and access to information, Google does index content that is “hidden” within accordion drawers.

Component Viewer

Preview various component colors, widths, and alignments.

Copy Block

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<!-- wp:group {"metadata":{"name":"Accordion light gray","categories":["data-elements"],"patternName":"utkwds/accordion-light-gray"},"align":"full","className":"utkwds-accordion-group","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"light","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-accordion-group has-light-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:utk-wds/accordion {"colorScheme":"medium"} -->
<div class="wp-block-utk-wds-accordion"><div data-accordion="true" class="utk-wds-accordion-wrapper" data-color-scheme="medium"><!-- wp:utk-wds/accordion-panel -->
<div class="wp-block-utk-wds-accordion-panel"><h2 class="utk-wds-accordion__heading" data-accordion-heading="true"><div>Lorem ipsum</div></h2><section data-accordion-section="true"><div class="utk-wds-accordion__panel-body"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div></section></div>
<!-- /wp:utk-wds/accordion-panel --></div></div>
<!-- /wp:utk-wds/accordion --></div>
<!-- /wp:group -->

Lorem ipsum

<!-- wp:group {"metadata":{"name":"Accordion Smokey","categories":["data-elements"],"patternName":"utkwds/accordion-smokey"},"align":"full","className":"utkwds-accordion-group","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}},"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"smokey","textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-accordion-group has-white-color has-smokey-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:utk-wds/accordion {"colorScheme":"dark"} -->
<div class="wp-block-utk-wds-accordion"><div data-accordion="true" class="utk-wds-accordion-wrapper" data-color-scheme="dark"><!-- wp:utk-wds/accordion-panel -->
<div class="wp-block-utk-wds-accordion-panel"><h2 class="utk-wds-accordion__heading" data-accordion-heading="true"><div>Lorem ipsum</div></h2><section data-accordion-section="true"><div class="utk-wds-accordion__panel-body"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- /wp:paragraph --></div></section></div>
<!-- /wp:utk-wds/accordion-panel --></div></div>
<!-- /wp:utk-wds/accordion --></div>
<!-- /wp:group -->

Lorem ipsum

<!-- wp:group {"metadata":{"name":"Accordion white","categories":["data-elements"],"patternName":"utkwds/accordion-white"},"align":"full","className":"utkwds-accordion-group","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull utkwds-accordion-group" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:utk-wds/accordion -->
<div class="wp-block-utk-wds-accordion"><div data-accordion="true" class="utk-wds-accordion-wrapper" data-color-scheme="light"><!-- wp:utk-wds/accordion-panel -->
<div class="wp-block-utk-wds-accordion-panel"><h2 class="utk-wds-accordion__heading" data-accordion-heading="true"><div>Lorem ipsum </div></h2><section data-accordion-section="true"><div class="utk-wds-accordion__panel-body"><!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br></p>
<!-- /wp:paragraph --></div></section></div>
<!-- /wp:utk-wds/accordion-panel --></div></div>
<!-- /wp:utk-wds/accordion --></div>
<!-- /wp:group -->