{"id":21065624,"url":"https://github.com/adaptlearning/adapt-contrib-accordion","last_synced_at":"2025-08-03T01:20:02.135Z","repository":{"id":37543912,"uuid":"14778775","full_name":"adaptlearning/adapt-contrib-accordion","owner":"adaptlearning","description":"An accordion component that displays clickable titles, which reveal display text","archived":false,"fork":false,"pushed_at":"2024-09-16T14:07:08.000Z","size":338,"stargazers_count":2,"open_issues_count":2,"forks_count":25,"subscribers_count":27,"default_branch":"master","last_synced_at":"2024-09-17T14:07:29.286Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adaptlearning.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-11-28T14:17:21.000Z","updated_at":"2024-07-15T07:57:13.000Z","dependencies_parsed_at":"2023-12-20T07:15:19.732Z","dependency_job_id":"2cdd867c-c045-4280-88a6-16a400c20592","html_url":"https://github.com/adaptlearning/adapt-contrib-accordion","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adaptlearning%2Fadapt-contrib-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adaptlearning","download_url":"https://codeload.github.com/adaptlearning/adapt-contrib-accordion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225402090,"owners_count":17468828,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T17:55:49.956Z","updated_at":"2024-11-19T17:55:50.513Z","avatar_url":"https://github.com/adaptlearning.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# adapt-contrib-accordion\n\n\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/accordion01.gif\" alt=\"accordion in action\" align=\"right\"\u003e  **Accordion** is a *presentation component* bundled with the [Adapt framework](https://github.com/adaptlearning/adapt_framework).\n\nThe 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.\n\n[Visit the **Accordion** wiki](https://github.com/adaptlearning/adapt-contrib-accordion/wiki) for more information about its functionality and for explanations of key properties.\n\n## Installation\n\nAs 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).\n\n* If **Accordion** has been uninstalled from the Adapt framework, it may be reinstalled.\nWith the [Adapt CLI](https://github.com/adaptlearning/adapt-cli) installed, run the following from the command line:\n`adapt install adapt-contrib-accordion`\n\n    Alternatively, this component can also be installed by adding the following line of code to the *adapt.json* file:\n    `\"adapt-contrib-accordion\": \"*\"`\n    Then running the command:\n    `adapt install`\n    (This second method will reinstall all plug-ins listed in *adapt.json*.)\n\n* 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).\n\u003cdiv float align=right\u003e\u003ca href=\"#top\"\u003eBack to Top\u003c/a\u003e\u003c/div\u003e\n\n## Settings Overview\n\nThe 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).\n\n### Attributes\n\n[**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).\n\n**\\_component** (string): This value must be: `accordion`.\n\n**\\_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.\n\n**\\_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.\n\n**instruction** (string): This optional text appears above the component. It is frequently used to\nguide the learner’s interaction with the component.\n\n**\\_shouldCollapseItems** (boolean): Used to control the auto-collapse of other expanded Accordion items whenever an item is clicked/expanded. Defaulted to 'true'\n\n**\\_shouldExpandFirstItem** (boolean): Used to control if the first item will expanded by default. Defaulted to 'false'\n\n**\\_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).\n\n**\\_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`.\n\n**\\_items** (array): Multiple items may be created. Each _item_ represents one element of the accordion and contains values for **title**, **body**, **\\_graphic**, and **\\_classes**.\n\n\u003e**title** (string): This text is displayed as the element's header. It is displayed at all times, even when the **body** has been collapsed.\n\n\u003e**body** (string): This content will be displayed when the learner opens this accordion element. It may contain HTML.\n\n\u003e**\\_titleIcon** (string): CSS class name to be applied to the accordion title icon.\n\n\u003e**\\_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`.\n\n\u003e**\\_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**.\n\n\u003e\u003e**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*).\n\n\u003e\u003e**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.\n\n\u003e\u003e**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 \u003cb\u003eLukasz 'Severiaan' Grela\u003c/b\u003e`.\n\n\u003e**\\_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.\n\n### Accessibility\n+ **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).\n\n## Limitations\n\nNo known limitations.\n\n----------------------------\n\n\u003ca href=\"https://community.adaptlearning.org/\" target=\"_blank\"\u003e\u003cimg src=\"https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg\" alt=\"adapt learning logo\" align=\"right\"\u003e\u003c/a\u003e\n**Author / maintainer:** Adapt Core Team\n**Accessibility support:** WAI AA\n**RTL support:** Yes\n**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge, IE11, Safari 12+13 for macOS/iOS/iPadOS, Opera\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadaptlearning%2Fadapt-contrib-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadaptlearning%2Fadapt-contrib-accordion/lists"}