Home

#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.

###Usage

Visit the page dedicated to Usage and Tips.

###Settings

The settings listed below are the properties that may be configured within the authoring tool. Listed first is the name of the property as it is presented in the authoring tool. It is followed in parentheses by the property as it is used in the Accordion source code. Finally, an explanation is provided to help the course author better utilize the property.

The relationship between Accordion's properties and the way they are presented in the authoring tool’s interface is governed by properties.schema.

Title (title): A reference title for the component. Title is distinct from the Display Title which, if present, appears above the component. If Display Title is rather long, Title provides the opportunity to use a shortened form in tighter spaces, such as in a menu or in the drawer.

Display Title (displayTitle): Optional text that will display as a title above the component. It can be used as a headline. In the authoring tool, Title and Display Title may be linked for easy input. Click the chain icon to toggle linking.

Body (body): Optional text that appears above the component. It can be used in a variety of ways, including as an introduction to the content in the component. HTML is permitted.

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

Classes (_classes): Custom classes predefined in the theme's Less files may be applied to this component. To do this, enter the name of the CSS class. If using more than one class, separate each with a space.

Layout (_layout): This defines the horizontal position of the component in the block that contains it. This property is set when the component is being added to the block. When Add to left or Add to right is selected, another component can occupy the space next to it. If Add is selected, the component spans the width of the containing block.

Further settings for this component are:

Items (_items): Each item represents one collapsible content panel and contains values for Item Title, Item Body, and Graphic. You may create as many as you need.

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

Item Body (body): This content will be displayed when the learner opens this collapsible panel. It may contain HTML.

Graphic (_graphic): An optional image which is displayed below the Item Body when the learner opens this collapsible panel. It contains values for src and alt. The Graphic is not displayed when the course is viewed on small device such as a mobile phone.

src (src): File name (including path) of the image. This text will be set when you upload an image or select one from the Asset Manager.

alt (alt): This text becomes the image’s HTML alt attribute. It is intended to be a text equivalent of the information conveyed by the image. It is read by assistive technology such as screen readers.

Back to Top

###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

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

Back to Top

##Limitations

The optional Graphic is not displayed when the course is viewed on small device such as a mobile phone.

Back to Top