Accordion Component

The Accordion Component can minimize page length by housing related pieces of content of a single topic within a series of collapsible panels. Consider using the Accordion Component when the different pieces of information are long and of different lengths.

*When using the Accordion Component, SEO will be limited to the content within the first panel and the panel headings since the second to last panels are closed on default so the content contained within them is not read by search engines.

Example

+ Accordion Panel 1 (50 characters including spaces)

The accordion panel can accomodate a number of the standard components as determined by the content needs.

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 

+ Accordion Panel 2

The accordion panel can accomodate a number of the standard components as determined by the content needs.

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 

+ Accordion Panel 3

+ Accordion Panel 4

The accordion panel can accomodate a number of the standard components as determined by the content needs.

Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. 

Use Cases

+ How to Request Accessories Under Comprehensive Coverage

Authoring, Requirements and Specifications


Accordion Items (Panels)
  • Quantity: 3-6

Title (for each accordion item)
  • Required Field
  • Usage: Heading for each panel
  • Character count (recommended max.): 50 including spaces
  • Case: Title
  • Translatable Field: Yes; page must be sent for translation manually

Unique ID (for each accordion item)
  • Required Field
  • Usage: Allows for deep linking to page with that panel open (first panel open on default)
    • The addition of a "#" followed by the page ID after the page URL allows for deep linking with that panel open
    • Example: http://www.zebra.com/us/en/zebra-web-style-guidelines/components/accordion-component.html#accordion-panel-4
  • Naming Convention: Typically folloows page naming convention
    • All lower case with hypens instaed of spaces

Authoring Notes
  • Panel Content Configuration: Most components can be placed within each panel to meet the needs of the content to be displayed 
  • Layout Options: Should not be used within the Column Control component
  • Using the Accordion Component in tandem with the Tab Control Component and/or Anchor Links is not recommended because it can be difficult for users to clearly identify the relationship between the content

Similar Components
  • Use the Tab Control Component when providing content that is related and similar in length
  • Use the Anchor Links component when the sections of content are more disparate or not directly connected