Accordions

Accordions are useful for displaying a large amount of data in a condensed format. Individual accordion panels can be linked to from other pages and will be opened and scrolled into view when the page loads.

Basic Accordion

Here is an accordion in its most basic form.

	
	

		Accordion Panel 1 Heading
	
	

		
[content goes here]
	
	
	

		Accordion Panel 2 Heading
	
	

		
[content goes here]
	
	
	

		Accordion Panel 3 Heading
	
	

		
[content goes here]
	

				

Here is the same HTML code with the accessibility features injected:

	
	

		Accordion Panel 1 Heading
	
	

		
[content goes here]
	
	
	

		Accordion Panel 2 Heading
	
	

		
[content goes here]
	
	
	

		Accordion Panel 3 Heading
	
	

		
[content goes here]
	

				

Accordion Configuration

The accordion component makes use of the description list (dl) HTML tag, with each individual accordion panel consisting of a header (dt) and a body (dd).

Notes/Options

Points worth noting and frequently used configurations.

• Accordion Accessibility: For accordions to be ADA-compliant, certain ARIA tags and CSS classes must be present in the HTML. To this end, the js-cx-accordion class must be present on the accordion dl tag. With this class in place, JavaScript will insert all the necessary accessibility configurations. Note that this does not extend to any custom content added within the dt and dd tags.

• Panel Anchors: It is possible to link directly to an accordion panel on the current page or on a different page altogether. See Anchor Linking in Business Manager below.

  To do so, add an id attribute with a unique value to the panel's dt element. Defining the same ID value to multiple items on the same page can lead to unexpected results, so choose a value that is unlikely to be present elsewhere on the page.

• Panel IDs: If no ID attribute is defined for a panel, a unique ID will be generated. It will be in a format such as cx-ui-1. Avoid linking to these auto-generated IDs because they will not always be the same from one page load to the next.
• Open panels: Remove the is-closed CSS class from both the dt and dd tags of an accordion panel for it to be open at page load.
• Panel toggling: At present, only one panel per accordion can be open at a time. Note that all accordion panels can be open at page load if the is-closed class is not applied, but all panels will be toggled closed once any panel is clicked. See Accordion with all panels open below for an example.

To Do List

Future enhancements that we hope to add in the near future include:

• Multiple Panels Open: The option to disable the one-open-panel-per-accordion feature will be added as time allows.
• Open/Close All: The ability to open or close all panels with one click.
• Skinning: The option to specify a different color scheme for an accordion. As an example, a version that is dark grey with white text needs to be developed for the mobile sitewide footer.
• Anchor Disabling: The option to prevent the page from scrolling when an accordion panel header is clicked.

Anchor Linking in Business Manager

The examples below illustrate how to link to an anchor (such as an accordion panel header) in Business Manager.

The first example links to an anchor on the current page.

Clicking the second link will open the FAQs page with the Order Information & Tracking accordion panel open and scrolled into view. Note that the ID assigned to that accordion panel (order-information-and-tracking) is added to the end of the URL with a leading hash tag (anchor).

Panel 3 in the basic accordion example
Order Information & Tracking FAQ
				

Accordion with all panels open

Here is an accordion with all of its panels open at page load. Click a panel header to toggle all panels.

	
	

		Accordion Panel 1 Heading
	
	

		
[content goes here]
	
	

		Accordion Panel 2 Heading
	
	

		
[content goes here]
	
	

		Accordion Panel 3 Heading
	
	

		
[content goes here]