adapt-contrib-accordion

Accordion is a presentation component bundled with the Adapt framework.

The component displays a vertically stacked list of headings. Each heading is associated with a collapsible content panel. Clicking a heading toggles the visibility of its content panel. Content panels may contain text and/or an image.

Visit the Accordion wiki for more information about its functionality and for explanations of key properties.

##Installation

As one of Adapt's core components, Accordion is included with the installation of the Adapt framework and the installation of the Adapt authoring tool.

• If Accordion has been uninstalled from the Adapt framework, it may be reinstalled. With the Adapt CLI installed, run the following from the command line:
  adapt install adapt-contrib-accordion

  Alternatively, this component can also be installed by adding the following line of code to the adapt.json file:
  "adapt-contrib-accordion": "*"
  Then running the command:
  adapt install
  (This second method will reinstall all plug-ins listed in adapt.json.)

• If Accordion has been uninstalled from the Adapt authoring tool, it may be reinstalled using the Plug-in Manager.

Back to Top

Settings Overview

The attributes listed below are used in components.json to configure Accordion, and are properly formatted as JSON in example.json. Visit the Accordion wiki for more information about how they appear in the authoring tool.

Attributes

core model attributes: These are inherited by every Adapt component. Read more.

_component (string): This value must be: accordion.

_classes (string): CSS class name to be applied to Accordion’s containing div. The class must be predefined in one of the Less files. Separate multiple classes with a space.

_layout (string): This defines the horizontal position of the component in the block. Acceptable values are full, left or right.

instruction (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.

_items (array): Multiple items may be created. Each item represents one element of the accordion and contains values for title, body, and _graphic.

title (string): This text is displayed as the element's header. It is displayed at all times, even when the body has been collapsed.

body (string): This content will be displayed when the learner opens this accordion element. It may contain HTML.

_graphic (object): An optional image which is displayed below the item body when the learner opens this accordion element. It contains values for src and alt.

src (string): File name (including path) of the image. Path should be relative to the src folder (e.g., course/en/images/c-45-1.jpg).

alt (string): This text becomes the image’s alt attribute.

Accessibility

Accordion has been assigned a label using the aria-label attribute: ariaRegion. This label is not a visible element. It is utilized by assistive technology such as screen readers. Should the region's text need to be customised, it can be found within the globals object in properties.schema.

Back to Top

Limitations

Body graphics are displayed only when "layout": "full". On a mobile device, a fully spanned Accordion will be reduced to single-width. At this smaller size the graphic will not be displayed.

---

Version number: 2.0 Framework versions: 2.0
Author / maintainer: Adapt Core Team
Accessibility support: WAI AA
RTL support: yes
Cross-platform coverage: Chrome, Chrome for Android, Firefox (ESR + latest version), IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 7+8), Safari for iPad (iOS 7+8), Safari 8, Opera