{"id":21524876,"url":"https://github.com/degjs/expander","last_synced_at":"2025-10-26T09:32:43.845Z","repository":{"id":55136725,"uuid":"304357201","full_name":"DEGJS/expander","owner":"DEGJS","description":"A re-usable plugin to manage functionality and accessibility of expanding elements","archived":false,"fork":false,"pushed_at":"2021-01-07T22:43:25.000Z","size":75,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-02-24T15:10:05.890Z","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":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DEGJS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-15T14:45:33.000Z","updated_at":"2021-01-07T22:41:44.000Z","dependencies_parsed_at":"2022-08-14T13:01:04.592Z","dependency_job_id":null,"html_url":"https://github.com/DEGJS/expander","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Fexpander","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Fexpander/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Fexpander/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DEGJS%2Fexpander/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DEGJS","download_url":"https://codeload.github.com/DEGJS/expander/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244085010,"owners_count":20395523,"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-24T01:30:10.896Z","updated_at":"2025-10-26T09:32:38.793Z","avatar_url":"https://github.com/DEGJS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# expander\n![Run Tests](https://github.com/DEGJS/expander/workflows/Run%20Tests/badge.svg)\n\nA re-usable plugin to manage functionality and accessibility of expanding elements\n\n## Install\n\n`expander` is an ES6 module. Consequently, you'll need an ES^ transpiler ([Babel](https://bablejs.io) is a nice one) as part of your Javascript workflow.\n\nIf you're already using NPM for your project, you can install `expander` with the following command:\n\n```\n$ npm install @degjs/expander\n```\n\n## Usage\n\nThe `expander` plugin will handle listening and responding to click events on a trigger button. It also handles accessibility associated with this (see accessibility section below). Finally, there is built-in support for animation when expanding or collapsing.\nIt will dispatch custom events that the application can listen and respond to.\n\n_Note: the expander plugin exports a variable called `events` to help standardize event names that the app can listen for._\n\n```js\nimport expander, { events } from '@degjs/expander';\n\nlet expanderInst;\n\nconst init = () =\u003e {\n    expanderInst = expander(containerEl);\n\n    containerEl.addEventListener(events.beforeExpand, onBeforeExpand);\n};\n\nconst destroy = () =\u003e {\n    expanderInst.destroy();\n};\n```\n\n## Options\n\n| Property Name      | Type      | Default           | Description                                                                                           |\n| ------------------ | --------- | ----------------- | ----------------------------------------------------------------------------------------------------- |\n| isExpanded         | `Boolean` | `false`           | Describes if the content is expanded on init                                                          |\n| toggleSelector     | `String`  | `\"button\"`        | The selector string to find the toggle trigger element                                                |\n| controlsId         | `String`  | `null`            | The id of the content element that is controlled by the toggle button                                 |\n| expandingCssClass  | `String`  | `\"is-expanding\"`  | The css class to be added when and element is in the process of expanding                             |\n| collapsingCssClass | `String`  | `\"is-collapsing\"` | The css class to be added when and element is in the process of collapsing                            |\n| expandedCssClass   | `String`  | `\"is-expanded\"`   | The css class to be added when and element is fully expanded                                          |\n| collapsedCssClass  | `String`  | `\"is-collapsed\"`  | The css class to be added when and element is fully collapsed                                         |\n| animationTargetEl  | `Element` | `null`            | The element to add the animation classes to                                                           |\n| animationEvent     | `String`  | `\"animationend\"`  | The animation event name to listen for. When it is fired, the expand or collapse action will commence |\n\n## Methods\n\n### getElement()\n\nThe getElement method returns the container element used by `expander`.\n\n#### Returns\n\n| Type    | Description                                                    |\n| ------- | -------------------------------------------------------------- |\n| Element | the element that contains the trigger and content for expander |\n\n### expand()\n\nA way to manually trigger the expand functionality of expander.\n\n### collapse()\n\nA way to manually trigger the collapse functionality of expander.\n\n### getOptions()\n\nThe getOptions method returns the current expander settings.\n\n#### Returns\n\n| Type   | Description                                                                  |\n| ------ | ---------------------------------------------------------------------------- |\n| Object | the current settings for `expander` (defaults and user-set options combined) |\n\n### setOptions(newOptions)\n\nThe setOptions method allows changes to the current `expander` settings. This method performs a merge of the original settings and the new ones.\n\n#### Arguments\n\n| Type   | Description                            |\n| ------ | -------------------------------------- |\n| Object | new settings for the `expander` plugin |\n\n#### Returns\n\nNothing\n\n### destroy()\n\nThis method removes any aria-attributes it created and cleans up any event listeners it created.\n\n## Accessibility Features\n\n### aria-controls\n\nThe `aria-controls` attribute details a relationships between two elements in the DOM. In this module, the `aria-controls` attribute is added to the toggle element if an element id is provided in the expander options.\n\nIt is recommended that the `controlsId` is passed as an option if the element shown/hidden by the toggle does not immediately follow the toggle in DOM order.\n\n### aria-expanded\n\nThe `aria-expanded` attribute details whether a collapsible region is expanded or collapsed.\n\nThe expander module will set the `aria-expanded` attribute to the appropriate value whenever content is expanded or collapsed.\n\n## Browser Support\n\n`expander` depends on the following browser APIs:\n\n-   Custom Event: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill)\n-   Element.classList.toggle: [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) | [Polyfill](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Polyfill)\n\nTo support legacy browsers, you'll need to include polyfills for the above APIs.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fexpander","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdegjs%2Fexpander","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdegjs%2Fexpander/lists"}