{"id":30420527,"url":"https://github.com/skybrud/sky-accordion","last_synced_at":"2026-02-09T08:05:08.573Z","repository":{"id":30951951,"uuid":"34510045","full_name":"skybrud/sky-accordion","owner":"skybrud","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-09T07:04:03.000Z","size":453,"stargazers_count":1,"open_issues_count":9,"forks_count":1,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-10-26T22:26:48.037Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/skybrud.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":"2015-04-24T09:30:08.000Z","updated_at":"2021-08-25T14:26:13.000Z","dependencies_parsed_at":"2023-01-14T18:01:30.352Z","dependency_job_id":null,"html_url":"https://github.com/skybrud/sky-accordion","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/skybrud/sky-accordion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skybrud","download_url":"https://codeload.github.com/skybrud/sky-accordion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skybrud%2Fsky-accordion/sbom","scorecard":{"id":830479,"data":{"date":"2025-08-11","repo":{"name":"github.com/skybrud/sky-accordion","commit":"998763e1178189e49be4306504c719e962044b36"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"46 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-6chw-6frg-f759","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-779f-wgxg-qr8f","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx","Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T17:39:22.934Z","repository_id":30951951,"created_at":"2025-08-23T17:39:22.934Z","updated_at":"2025-08-23T17:39:22.934Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29259476,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T04:11:57.159Z","status":"ssl_error","status_checked_at":"2026-02-09T04:11:56.117Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2025-08-22T08:19:25.481Z","updated_at":"2026-02-09T08:05:08.537Z","avatar_url":"https://github.com/skybrud.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e SkyAccordion - a flexible accordion plugin for Vue.js 2, build on vue2-collapse\n\n## Animations !important\nThis module has no bias towards how animations should be done or what library to use. The Exampels in the bottom of this document shows how to use the incredible static CSS solution as well as how to implement GSAP animations\n\n**Table of contents**\n---\n- [Getting started](#getting-started)\n  - [Quick start](#quick-start)\n  - [Usage](#usage)\n    - [Basic example](#basic-example)\n    - [Grouping elements](#grouping-elements)\n    - [Custom toggle element](#custom-toggle-element)\n    - [Nesting](#nesting)\n- [Plugin](#plugin)\n  - [Components](#components)\n    - [sky-accordion-wrapper](#sky-accordion-wrapper)\n      - [Methods](#methods)\n        - [Usage](#usage-1)\n      - [Events](#events)\n        - [Usage](#usage-2)\n      - [Custom properties](#custom-properties)\n        - [Usage](#usage-3)\n      - [Data properties](#data-properties)\n    - [sky-accordion-group](#sky-accordion-group)\n      - [Computed properties](#computed-properties)\n      - [Custom properties](#custom-properties-1)\n      - [Methods](#methods-1)\n        - [Usage](#usage-4)\n  - [Directives](#directives)\n    - [v-sky-accordion-content](#v-sky-accordion-content)\n    - [v-sky-accordion-toggle](#v-sky-accordion-toggle)\n- [Examples](#examples)\n  - [Accordion](#accordion)\n  - [Accordion with closeAll + openAll option](#accordion-with-closeall--openall-option)\n  - [Single wrapper with header toggle + external button toggle](#single-wrapper-with-header-toggle--external-button-toggle)\n  - [Accordion GSAP TweenLite animation](#accordion-gsap-tweenlite-animation)\n  - [Single wrapper GSAP Tweelite animation](#single-wrapper-gsap-tweelite-animation)\n  - [CSS only animation](#css-only-animation)\n- [Todo](#todo)\n\n# Getting started\n## Quick start\n\nIn order to make the plugin work we need to download necessary dependencies.\n\n``` bash\nyarn add sky-accordion\n```\n\nNext thing to do is adding the plugin to the Vue.\n\n``` javascript\n// Import Vue and sky-accordion\nimport Vue from 'vue'\nimport SkyAccordion from 'sky-accordion'\n\n// Loading the plugin into the Vue.\nVue.use(SkyAccordion)\n```\n\n## Usage\n\n### Basic example\nEvery collapse element requires the `\u003csky-accordion-wrapper\u003e\u003c/sky-accordion-wrapper\u003e` component which represent single accordion element.\n\n``` html\n\u003csky-accordion-wrapper\u003e\n    \u003cdiv class=\"header\" v-sky-accordion-toggle\u003e\n        Click me to toggle content\n    \u003c/div\u003e\n    \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n        This is hiddend content\n    \u003c/div\u003e\n\u003c/sky-accordion-wrapper\u003e\n```\n\nThe div element with `header` class thanks to `v-sky-accordion-toggle` directive will be a clickable element which will show and hide the content. Applying `v-sky-accordion-content` to the element with `content` class binds it with the toggle element. While clicking on the header element, the content will be toggled.\n\n\n### Grouping elements\n\nSkyAccordion allows to wrap more elements into a group components `\u003csky-accordion-group\u003e\u003c/sky-accordion-group\u003e`, which helps with code organisation and provides some additional functionality.\n\n``` html\n\u003csky-accordion-group :only-one-active=\"true\"\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n\u003c/sky-accordion-group\u003e\n```\n**By the default, each element will stay opened after toggle action, however setting the `only-one-active` to `true` will prevent group from opening more than one element at the same time- same behaviour as non-grouped elements.**\n### Custom toggle element\n\nIn some cases developers need to create a custom toggle element which not necessarily has to rendered within the wrapper element. SkyAccordion provides a solution for that cases. Thanks to Vue's API `ref` we can assign an external (located outside the wrapper) toggler.\n\n``` html\n\u003cbutton sky-accordion-toggle=\"'toggleFirst'\"\u003eToggle first element\u003c/button\u003e\n\u003cbutton sky-accordion-toggle=\"'toggleSecond'\"\u003eToggle second element\u003c/button\u003e\n\n\u003csky-accordion-wrapper ref=\"toggleFirst\"\u003e\n    \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n        This is hiddend content\n    \u003c/div\u003e\n\u003c/sky-accordion-wrapper\u003e\n\u003csky-accordion-wrapper ref=\"toggleSecond\"\u003e\n    \u003cdiv class=\"content\" v-sky-accordion-content\u003e\n        This is hiddend content\n    \u003c/div\u003e\n\u003c/sky-accordion-wrapper\u003e\n```\n\n**Notice:**  the `v-sky-accordion-toggle` directive was removed from the `v-sky-accordion-wrapper` component, but it is **valid** to keep secondary toggler within the wrapper.\n\n\n### Nesting\nSkyAccordion allows nesting elements inside each other. The nested element should be rendered within the `v-sky-accordion-content` directive element.\n\n``` html\n\u003csky-accordion-wrapper\u003e\n    \u003cdiv class=\"header\" v-sky-accordion-toggle\u003e\n        Click me to toggle content\n    \u003c/div\u003e\n    \u003cdiv class=\"content\" v-sky-accordion-content\u003e\n        \u003csky-accordion-wrapper\u003e\n            \u003cdiv class=\"header\" v-sky-accordion-toggle\u003e\n                Click toggle to toggle content\n            \u003c/div\u003e\n            \u003cdiv class=\"content\" v-sky-accordion-content\u003e\n                This is hiddend content\n            \u003c/div\u003e\n        \u003c/sky-accordion-wrapper\u003e\n    \u003c/div\u003e\n\u003c/sky-accordion-wrapper\u003e\n```\n\n# Plugin\n## Components\nIn this section of documentation you will find more detailed description the plugin. Each custom component provides its own events and methods which can be used in order to extend functionality.\n\n### sky-accordion-wrapper\nWrapper component which should **always** be a parent of elements which are using the `v-sky-accordion-content ` directive and the `v-sky-accordion-toggle` directive (unless the toggle is used with a reference to a `sky-accordion-wrapper` as showcased in the [Custom toggle element](#custom-toggle-element) section).\nEach of the `sky-accordion-wrapper` component instances can use following methods, events and stores data, which can be used to perform custom actions.\n\n#### Methods\n\n| Method        | Description |  Parameters |\n| ------------- |:-------------:|:-------------:|\n| `.open()`    | Open the instance | none\n| `.close()`      | Close the instance| none\n| `.toggle()` |   Toggle instance (opens if closed, closes if opened)  | none\n\n##### Usage\n\nIn this example we are going to create a custom method which will be responsible for opening a referred element. In order to get the instance of the component we are using `ref` once again.\n\nTemplate:\n``` html\n\u003csky-accordion-wrapper ref=\"openMe\"\u003e\n    \u003cdiv class=\"content\" v-sky-accordion-content\u003e\n        This is hiddend content\n    \u003c/div\u003e\n\u003c/sky-accordion-wrapper\u003e\n```\n\nVue instance:\n``` javascript\nmodule.exports = {\n    ...\n    methods : {\n        triggerReferedElement : function(){\n            this.$refs.openMe.open();\n        }\n    }\n    ...\n}\n```\n\nYou can also make a reference of group component, that allows you to perform actions on multiple elements without creating multiple refs.\n\nTemplate:\n``` html\n\u003csky-accordion-group ref=\"mygroup\"\u003e\n    \u003csky-accordion-wrapper\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/sky-accordion-wrapper\u003e\n\u003c/sky-accordion-group\u003e\n```\n\nVue instance:\n``` javascript\nmodule.exports = {\n    ...\n    methods : {\n            openSecond : function(){\n                this.$refs.mygroup.elements[1].open(); // opens second element\n            }\n        }\n    ...\n}\n```\n\n#### Events\n\n| Event name        |   Arguments passed  | Description |\n| ------------- |:-------------: |:-------------:|\n| `beforeToggle`  | `vm {Object}` | Invoked before toggle action, returns component instance object|\n| `afterToggle`  | `vm {Object}`| Invoked after toggle action, returns component instance object|\n| `beforeClose` |  `vm {Object}`| Invoked before close action, returns component instance object|\n| `afterClose` | `vm {Object}`| Invoked after close action, returns component instance object|\n| `beforeOpen` |  `vm {Object}`| Invoked before open action, returns component instance object|\n| `afterOpen` |  `vm {Object}`| Invoked before close action, returns component instance object|\n| `afterNodesBinding` |  `vm {Object}, nodes {Object}`| Invoked during mount event in the component, returns component instance and nodes object with toggle and content DOM elements|\n| `statusChange` |  `vm {Object}, new_status {Boolean}, old_status {Boolean}`| Invoked whenever status of the element changes from open to close (true is opened, false is closed)|\n\n##### Usage\nEvents work the same way it is presented in official Vue documentation.\n\nTemplate:\n``` html\n    \u003csky-accordion-wrapper v-on:beforeClose=\"myCustomAction\"\u003e\n         \u003cdiv class=\"header\" v-sky-accordion-toggle\u003e\n             Click me to toggle content\n         \u003c/div\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/sky-accordion-wrapper\u003e\n```\n\nVue instance:\n``` javascript\nmodule.exports = {\n    ...\n    methods : {\n            myCustomAction : function(vm){\n                console.log(vm); // logs component object before closing itself\n            }\n        }\n    ...\n}\n```\n\n#### Custom properties\n\nVue collapse wrapper for now accepts only one custom property- `active` which is used for changing the status of the accordion element.\n\n| Custom property | Type |  Description |\n| ------------- |:-------------:|:-------------:|\n| `v-bind:active`    | Boolean | Changes the default status of the element while rendering.\n\n**Notice:**  the `v-bind:active` property overrides the default status of element, however the default behaviour of the accordion is **not** changed. Setting `:active=\"true\"` to every element of the accordion list which is using `:only-one-active=\"true\"` property on the group component will outcome with opening only the first element.\n\n##### Usage\nThe status of the collapse element will be set to true while rendering.\n\nTemplate:\n``` html\n    \u003csky-accordion-wrapper  :active=\"true\"\u003e\n         \u003cdiv class=\"header\" v-sky-accordion-toggle\u003e\n             Click me to toggle content\n         \u003c/div\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/v-collapse-wrapper\u003e\n```\n\nThe property is reactive so it can be used for more complex usage as well.\n\n#### Data properties\n\nEvery wrapper component stores necessary data properties, which can be used while extending plugin to own needs.\n\n| Data property | Type |  Description |\n| ------------- |:-------------:|:-------------:|\n| `nodes`    | {Object} | Object stores DOM elements for toggler and the content.\n| `nodes.toggle`    | {Dom node} | HTML DOM element represents toggler element for the wrapper component.\n| `nodes.content`    | {Dom node} | HTML DOM element represents content element of the wrapper component.\n| `status`      |{Boolean}| The status of the component. Status decides whether element is toggled or not.\n\n\n### sky-accordion-group\n\nThis is a group component. Sometimes there is a need of creating several different accordion lists. Grouping list elements helps with this and other different cases.\n\n\n``` html\n\u003csky-accordion-group :only-one-active=\"true\"\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n\u003c/sky-accordion-group\u003e\n\n\u003csky-accordion-group\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e ... \u003c/sky-accordion-wrapper\u003e\n\u003c/sky-accordion-group\u003e\n```\n\nFirst collapse group will allow only one element to be opened at the same time, while the second group can open all of the elements at the same time.\n\n#### Computed properties\n\n| Computed property | Type |  Description |\n| ------------- |:-------------:|:-------------:|\n| `elements`    | Array | Returns the array of `sky-accordion-wrapper` objects in the group.\n| `elementsCount`    | Integer | Returns the length of elements array.\n| `activeElements`    | Array | Returns the array of the **active** `sky-accordion-wrapper` objects in the group.\n| `inActiveElements`    | Array | Returns the array of the **in-active** `sky-accordion-wrapper` objects in the group.\n\n#### Custom properties\n\n| Custom property | Type |  Description |\n| ------------- |:-------------:|:-------------:|\n| `v-bind:only-one-active`    | Boolean | Allow only one accordion element to be opend (`status: true`).\n\n\n#### Methods\n\n| Method        | Description |  Parameters |\n| ------------- |:-------------:|:-------------:|\n| `.openAll()`    | Open all instances of `sky-accordion-wrapper` component within group | none\n| `.closeAll()`      | Close all instances of `sky-accordion-wrapper` component within group| none\n\n##### Usage\n\nTemplate:\n``` html\n\u003csky-accordion-wrapper ref=\"mygroup\"\u003e\n    \u003csky-accordion-wrapper\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/sky-accordion-wrapper\u003e\n    \u003csky-accordion-wrapper\u003e\n        \u003cdiv class=\"my-content\" v-sky-accordion-content\u003e\n            This is hiddend content\n        \u003c/div\u003e\n    \u003c/sky-accordion-wrapper\u003e\n\u003c/sky-accordion-wrapper\u003e\n```\n\nVue instance:\n``` javascript\nmodule.exports = {\n    ...\n    methods : {\n            openAll : function(){\n                this.$refs.mygroup.openAll(); // opens all elements\n            }\n        }\n    ...\n}\n```\n\n## Directives\n\n### v-sky-accordion-content\nThis directive ought to be applied on the DOM element which will contain content of single list element. **Only** this element will be able to be toggled on and off within wrapper component. Element with this directive should **not** be a parent of the element with `v-sky-accordion-toggle` directive.\n\n### v-sky-accordion-toggle\nThe directive changes  a default behavior of the element and allows to click on it in order to toggle list element. Note that this directive should be located within the `\u003csky-accordion-wrapper\u003e\u003c/sky-accordion-wrapper\u003e` in order to make it working without manual binding.\nHowever if there is a need to create the toggle element somewhere else, not inside the wrapper component you can use vue's reference to make it work.\n\n# Examples\n\n## Accordion\n```html\n\u003cSkyAccordionGroup\n    ref=\"mygroup\"\n    :only-one-active=\"false\"\n\u003e\n    \u003cSkyAccordionWrapper\u003e\n        \u003ctemplate slot-scope=\"{ isActive }\"\u003e\n            \u003cdiv\n                class=\"header\"\n                v-sky-accordion-toggle\n            \u003e\n                Click me to toggle content {{ isActive }}\n            \u003c/div\u003e\n            \u003cdiv\n                class=\"my-content\"\n                v-sky-accordion-content\n            \u003e\n                Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n                Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n            \u003c/div\u003e\n        \u003c/template\u003e\n    \u003c/SkyAccordionWrapper\u003e\n    \u003cSkyAccordionWrapper\u003e\n        \u003cdiv\n            class=\"header\"\n            v-sky-accordion-toggle\n        \u003e\n            ToggleButton\n        \u003c/div\u003e\n        \u003cdiv\n            class=\"my-content\"\n            v-sky-accordion-content\n        \u003e\n            Toggle content\n        \u003c/div\u003e\n    \u003c/SkyAccordionWrapper\u003e\n\u003c/SkyAccordionGroup\u003e\n```\n\n## Accordion with closeAll + openAll option\n```javascript\nexport default {\n    name: 'ParentComponent',\n    methods: {\n        closeAll() {\n            this.$refs.mygroup.closeAll();\n        },\n        openAll() {\n            this.$refs.mygroup.openAll();\n        },\n    },\n}\n```\n\n\n```html\n\u003cParentComponent\u003e\n    \u003cbutton @click=\"closeAll()\"\u003eclose all\u003c/button\u003e\n    \u003cbutton @click=\"openAll()\"\u003eopen all\u003c/button\u003e\n\n    \u003cSkyAccordionGroup\n        ref=\"mygroup\"\n        :only-one-active=\"false\"\n    \u003e\n        \u003cSkyAccordionWrapper\u003e\n            \u003ctemplate slot-scope=\"{ isActive }\"\u003e\n                \u003cdiv\n                    class=\"header\"\n                    v-sky-accordion-toggle\n                \u003e\n                    Click me to toggle content {{ isActive }}\n                \u003c/div\u003e\n                \u003cdiv\n                    class=\"my-content\"\n                    v-sky-accordion-content\n                \u003e\n                    Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n                    Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n                \u003c/div\u003e\n            \u003c/template\u003e\n        \u003c/SkyAccordionWrapper\u003e\n        \u003cSkyAccordionWrapper\u003e\n            \u003cdiv\n                class=\"header\"\n                v-sky-accordion-toggle\n            \u003e\n                ToggleButton\n            \u003c/div\u003e\n            \u003cdiv\n                class=\"my-content\"\n                v-sky-accordion-content\n            \u003e\n                Toggle content\n            \u003c/div\u003e\n        \u003c/SkyAccordionWrapper\u003e\n    \u003c/SkyAccordionGroup\u003e\n\u003c/ParentComponent\u003e\n```\n\n\n## Single wrapper with header toggle + external button toggle\n```html\n\u003cbutton v-sky-accordion-toggle=\"'singleton'\"\u003esingleton wrapper\u003c/button\u003e\n\n\u003cSkyAccordionWrapper ref=\"singleton\"\u003e\n    \u003cdiv\n        class=\"header\"\n        v-sky-accordion-toggle\n    \u003e\n        Click me to toggle content\n    \u003c/div\u003e\n    \u003cdiv\n        class=\"my-content\"\n        v-sky-accordion-content\n    \u003e\n        \u003cp\u003e\n            Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n            Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n            Lorem ipsum dolor sit amet adipisicing elit. Et, quod architecto.\n        \u003c/p\u003e\n    \u003c/div\u003e\n\u003c/SkyAccordionWrapper\u003e\n```\n\n\n## Accordion GSAP TweenLite animation\n```javascript\n// This import way ensures SSR executes without errors\nconst GSAP = {};\n\nif (typeof window !== 'undefined') {\n    GSAP.TweenLite = require('gsap/all').TweenLite;\n    GSAP.CSSPlugin = require('gsap/all').CSSPlugin;\n}\n\nexport default {\n    name: 'ParentComponent',\n    mounted() {\n        this.$on('statusChange', (payload) =\u003e {\n            payload.status\n                ? this.tweenOpen(payload.vm.nodes.content)\n                : this.tweenClose(payload.vm.nodes.content);\n        });\n\n        this.$refs.mygroup.inActiveElements.forEach((el) =\u003e {\n            this.tweenSet(el.nodes.content, 0);\n        });\n    },\n    methods: {\n        closeAll() {\n            this.$refs.mygroup.closeAll();\n        },\n        openAll() {\n            this.$refs.mygroup.openAll();\n        },\n        tweenOpen(element) {\n            // Enable animation to height auto.\n            this.tweenSet(element, 'auto');\n\n            GSAP.TweenLite.from(\n                element,\n                0.3,\n                { height: 0 },\n            );\n        },\n        tweenClose(element) {\n            GSAP.TweenLite.to(\n                element,\n                0.3,\n                { height: 0 },\n            );\n        },\n        tweenSet(element, height) {\n            GSAP.TweenLite.set(element, { height });\n        },\n    },\n}\n```\n\n\n## Single wrapper GSAP Tweelite animation\n```javascript\n// This import way ensures SSR executes without errors\nconst GSAP = {};\n\nif (typeof window !== 'undefined') {\n    GSAP.TweenLite = require('gsap/all').TweenLite;\n    GSAP.CSSPlugin = require('gsap/all').CSSPlugin;\n}\n\nexport default {\n    name: 'ParentComponent',\n    mounted() {\n        this.$on('statusChange', (payload) =\u003e {\n            payload.status\n                ? this.tweenOpen(payload.vm.nodes.content)\n                : this.tweenClose(payload.vm.nodes.content);\n        });\n\n        if (this.$refs.singleton \u0026\u0026 !this.$refs.singleton.status) {\n            this.tweenSet(this.$refs.singleton.nodes.content, 0);\n        }\n    },\n    methods: {\n        close() {\n            this.$refs.singleton.close();\n        },\n        open() {\n            this.$refs.singleton.open();\n        },\n        tweenOpen(element) {\n            this.tweenSet(element, 'auto');\n\n            GSAP.TweenLite.from(\n                element,\n                0.3,\n                { height: 0 },\n            );\n        },\n        tweenClose(element) {\n            GSAP.TweenLite.to(\n                element,\n                0.3,\n                { height: 0 },\n            );\n        },\n        tweenSet(element, height) {\n            GSAP.TweenLite.set(element, { height });\n        },\n    },\n}\n```\n\n\n## CSS only animation\n```css\n.sky-accordion-content {\n    max-height: 0;\n    transition: max-height 0.3s ease-out;\n    overflow: hidden;\n}\n\n.sky-accordion-wrapper--is-active .sky-accordion-content {\n    transition: max-height 0.3s ease-in;\n    max-height: 500px;\n}\n```\n\n# Todo\n- implement [a11y](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/examples/accordion/accordion.html)\n- deeplinkage support (determine if to be inside or outside module)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskybrud%2Fsky-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskybrud%2Fsky-accordion/lists"}