https://github.com/adaptlearning/adapt-contrib-accordion
An accordion component that displays clickable titles, which reveal display text
https://github.com/adaptlearning/adapt-contrib-accordion
Last synced: 12 months ago
JSON representation
An accordion component that displays clickable titles, which reveal display text
- Host: GitHub
- URL: https://github.com/adaptlearning/adapt-contrib-accordion
- Owner: adaptlearning
- License: gpl-3.0
- Created: 2013-11-28T14:17:21.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2024-09-16T14:07:08.000Z (almost 2 years ago)
- Last Synced: 2024-09-17T14:07:29.286Z (almost 2 years ago)
- Language: JavaScript
- Size: 330 KB
- Stars: 2
- Watchers: 27
- Forks: 25
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# adapt-contrib-accordion
**Accordion** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/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](https://github.com/adaptlearning/adapt-contrib-accordion/wiki) for more information about its functionality and for explanations of key properties.
## Installation
As one of Adapt's *[core components](https://github.com/adaptlearning/adapt_framework/wiki/Core-Plug-ins-in-the-Adapt-Learning-Framework#components),* **Accordion** is included with the [installation of the Adapt framework](https://github.com/adaptlearning/adapt_framework/wiki/Manual-installation-of-the-Adapt-framework#installation) and the [installation of the Adapt authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki/Installing-Adapt-Origin).
* If **Accordion** has been uninstalled from the Adapt framework, it may be reinstalled.
With the [Adapt CLI](https://github.com/adaptlearning/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](https://github.com/adaptlearning/adapt_authoring/wiki/Plugin-Manager).
## Settings Overview
The attributes listed below are used in *components.json* to configure **Accordion**, and are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/example.json). Visit the [**Accordion** wiki](https://github.com/adaptlearning/adapt-contrib-accordion/wiki) for more information about how they appear in the [authoring tool](https://github.com/adaptlearning/adapt_authoring/wiki).
### Attributes
[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).
**\_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.
**\_shouldCollapseItems** (boolean): Used to control the auto-collapse of other expanded Accordion items whenever an item is clicked/expanded. Defaulted to 'true'
**\_shouldExpandFirstItem** (boolean): Used to control if the first item will expanded by default. Defaulted to 'false'
**\_setCompletionOn** (string): Determines when the component registers as complete. Acceptable values are `"allItems"` and `"inview"`. `"allItems"` (the default) requires the learner to view every single accordion item; `"inview"` requires only that the component has been viewed (i.e. passed completely through the browser viewport).
**\_isCenterAligned** (boolean): If enabled, the layout of the item button child elements will be stacked on top of one another centrally. Acceptable values are `true` and `false`. The default value is `false`.
**\_items** (array): Multiple items may be created. Each _item_ represents one element of the accordion and contains values for **title**, **body**, **\_graphic**, and **\_classes**.
>**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.
>**\_titleIcon** (string): CSS class name to be applied to the accordion title icon.
>**\_imageAlignment** (string): Defines the alignment of the item image. Full: Image spans the entire width of the container below the text area. Left: Image aligned to the left of the text area. Right: Image aligned to the right of the text area. The default alignment is `full`. For smaller screens the alignment defaults to `full`.
>**\_graphic** (object): An optional image which is displayed below the item body when the learner opens this accordion element. It contains values for **src**, **alt**, and **attribution**.
>>**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): The alternative text for this image. Assign [alt text](https://github.com/adaptlearning/adapt_framework/wiki/Providing-good-alt-text) to images that convey course content only.
>>**attribution** (string): Optional text to be displayed as an [attribution](https://wiki.creativecommons.org/Best_practices_for_attribution). By default it is displayed over the bottom of the image. Adjust positioning by modifying CSS. Text can contain HTML tags, e.g., `Copyright © 2015 by Lukasz 'Severiaan' Grela`.
>**\_classes** (string): An optional class that will be applied to the Accordion Item. Additional classes can be used but they must be predefined in one of the Less files. Separate multiple classes with a space.
### Accessibility
+ **Accordion** has been assigned a label using the [aria-label](https://github.com/adaptlearning/adapt_framework/wiki/Aria-Labels) 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*](https://github.com/adaptlearning/adapt-contrib-accordion/blob/master/properties.schema).
## Limitations
No known limitations.
----------------------------
**Author / maintainer:** Adapt Core Team
**Accessibility support:** WAI AA
**RTL support:** Yes
**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera