{"id":18773094,"url":"https://github.com/webfactory/accordion","last_synced_at":"2026-02-13T17:05:32.073Z","repository":{"id":46283524,"uuid":"113595210","full_name":"webfactory/accordion","owner":"webfactory","description":"A JS plugin for accessible accordions","archived":false,"fork":false,"pushed_at":"2024-06-07T10:27:52.000Z","size":55,"stargazers_count":0,"open_issues_count":3,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-07T14:06:03.893Z","etag":null,"topics":["a11y","accesibility","accessible-accordions","accordion","accordion-plugin","accordions"],"latest_commit_sha":null,"homepage":"","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/webfactory.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"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":"2017-12-08T16:34:15.000Z","updated_at":"2024-06-07T10:27:55.000Z","dependencies_parsed_at":"2024-06-07T11:47:01.097Z","dependency_job_id":"a2d145e7-8603-4064-94a1-dc8f3d8105ec","html_url":"https://github.com/webfactory/accordion","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Faccordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Faccordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Faccordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Faccordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfactory","download_url":"https://codeload.github.com/webfactory/accordion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246237429,"owners_count":20745348,"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":["a11y","accesibility","accessible-accordions","accordion","accordion-plugin","accordions"],"created_at":"2024-11-07T19:32:43.528Z","updated_at":"2026-02-13T17:05:32.069Z","avatar_url":"https://github.com/webfactory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wfAccordion\nA tiny script that _progressively enhances_ static HTML with accessible and keyboard-enabled accordion functionality.\n\n⚠️ **Please note:** \n- Depending on your requirements and browser support matrix, the [native HTML `\u003cdetails\u003e` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) may be sufficient for your accordion use case.\n- v4.0.0 and above have dropped jQuery and no longer support Internet Explorer.\n- v2.0.0 and above require a wrapping element around any group of consecutive accordions.\n\n## Usage\nRequired HTML structure:\n```\n\u003cdiv class=\"wf-accordion-group js-accordion-group\"\u003e\n    \u003cdiv class=\"wf-accordion js-accordion\"\u003e\n        \u003cdiv class=\"wf-accordion__header js-accordion__header\"\u003e\n            \u003cdiv class=\"wf-accordion__trigger js-accordion-trigger\"\u003eTitle\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"wf-accordion__panel js-accordion__panel\"\u003eText\u003c/div\u003e\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\nYou can use `dist/wf.accordion.min.js` which will auto-initiate all accordions on page load if you follow the HTML structure shown above. If you want more fine-grained control, you can \nuse ES Module `import` directly from `src/accordion.js`. You will need Webpack or similar to produce a bundle for production.\n\n### Examples:\n\nHTML:\n```\n\u003cscript src=\"path/to/node_modules/webfactory-accordion/dist/wf.accordion.min.js\" defer\u003e\u003c/script\u003e\n```\n\nES Module import as-is:\n```\nimport 'webfactory-accordion/dist/wf.accordion.min';\n```\n\nES Module import with custom settings:\n```\nimport { wfaccordionsInit } from 'webfactory-accordion/src/accordion';\n\nwfaccordionsInit({\n    accordionGroup: '.my-fancy-accordion-group-js-hook',\n});\n\n```\n\n## Settings\nOption | Type | Default | Description\n------ | ---- | ------- | -----------\naccordionGroup | string | '.js-accordion-group' | Class hook for the accordion wrapper. This is the hook you initiate the script with (see example above).\naccordionRoot | string | '.js-accordion' | Class hook for the accordion. This is the internal hook used to find invidual accordions inside groups.\naccordionHeader | string | '.js-accordion__header' | Class hook for the accordion header container.\naccordionTrigger | string | '.js-accordion__trigger' | Class hook for the accordion title (a child of the header container). This element is transformed to a `\u003cbutton\u003e` by the plugin for accessibility reasons.\naccordionPanel | string | '.js-accordion__panel' | Class hook for the accordion panel. This element is typically hidden by the plugin until the accordion is opened by the user.\ndisableHashUpdate | boolean | false | Disables the automated hash update when triggering an accordion.\n\n### Notes:\n- The accordion trigger can be any element (e.g. `\u003ch2\u003e`); you only need to be aware that a `\u003cbutton\u003e` will be inserted into this element \n  by the plugin and that all attributes of the trigger element will be moved to the `\u003cbutton\u003e`. The visual design\n  should therefore depend on a class and not on the element!\n- The names of CSS- and JS-hook-classes are completely customizable, you only need to pass the latter (`.js-*`) to the\n  plugin via options if they differ from the defaults\n- You can set any accordion to be expanded on initialization by applying the data attribute `data-wf-accordion-expanded` to the accordion container.\n- You can set any accordion to be disabled by applying the data attribute `data-wf-accordion-disabled` to the accordion container.\n\n### Keyboard support:\n- All interactive elements observe normal tab ⇥ order (accordion triggers are focussable, open panels allow focussing of links inside themselves)\n- Once an accordion receives focus, you can cycle through all accordions on the page with the arrow keys ↑↓\n- You can navigate to the first or last accordion on the page with Page Up ↖ or Page Down ↘ respectively.\n- Accordion triggers support Space and Enter ↵ keys for toggling of accordions.\n\n## Credits, Copyright and License\n\nThis bundle was started at webfactory GmbH, Bonn.\n\n- \u003chttps://www.webfactory.de\u003e\n- \u003chttps://twitter.com/webfactory\u003e\n\nCopyright 2019-2023 webfactory GmbH, Bonn. Code released under [the MIT license](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Faccordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebfactory%2Faccordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Faccordion/lists"}