{"id":26130568,"url":"https://github.com/maykinayki/mn-accordion","last_synced_at":"2025-04-13T19:25:03.475Z","repository":{"id":57299278,"uuid":"112960065","full_name":"maykinayki/mn-accordion","owner":"maykinayki","description":"An accordion plugin with support of ES6 and SCSS","archived":false,"fork":false,"pushed_at":"2017-12-05T11:42:54.000Z","size":27,"stargazers_count":4,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-27T10:07:41.715Z","etag":null,"topics":["accordion-plugin","bower","java","javascript","scss"],"latest_commit_sha":null,"homepage":"https://maykinayki.github.io/mn-accordion","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/maykinayki.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":"2017-12-03T20:13:29.000Z","updated_at":"2023-03-08T07:17:50.000Z","dependencies_parsed_at":"2022-08-26T18:02:50.625Z","dependency_job_id":null,"html_url":"https://github.com/maykinayki/mn-accordion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinayki%2Fmn-accordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinayki%2Fmn-accordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinayki%2Fmn-accordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykinayki%2Fmn-accordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maykinayki","download_url":"https://codeload.github.com/maykinayki/mn-accordion/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248148245,"owners_count":21055548,"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":["accordion-plugin","bower","java","javascript","scss"],"created_at":"2025-03-10T20:46:27.313Z","updated_at":"2025-04-13T19:25:03.453Z","avatar_url":"https://github.com/maykinayki.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"MN Accordion (ES6, SCSS)\n============\n\nAn accordion plugin with support of ES6 and SCSS\n\n## Demo \u0026 Examples\n\nLive demo: [maykinayki.github.io/mn-accordion](http://maykinayki.github.io/mn-accordion/)\n\n\n## Installation\n\nUsing yarn\n\n```js\nyarn add mn-accordion\n```\n\nUsing npm\n\n```js\nnpm install mn-accordion --save\n```\n\nYou can then import plugin and its styles in your application as follows:\n\n```js\nimport MNAccordion from 'mn-accordion';\nimport 'mn-accordion/dist/css/mn-accordion.css';\n```\n\nUsing bower\n\n```js\nbower install mn-accordion --save\n```\n\n### HTML markup\n\nBy using bower or CDN you can also use the standalone UMD build by including `path/to/bower_components/mn-accordion/dist/js/mn-accordion.min.js` and `path/to/bower_components/mn-accordion/dist/css/mn-accordion.min.css` in your page.\n \u003cbr\u003e\n\n```html\n\n\u003chead\u003e\n    \u003clink rel=\"stylesheet\" href=\"path/to/bower_components/mn-accordion/dist/css/mn-accordion.min.css\"\u003e\n    ...\n\u003c/head\u003e\n\u003cbody\u003e\n\n    \u003cdiv class=\"mn-accordion\" id=\"accordion\"\u003e\n    \n            \u003c!--Accordion item--\u003e\n            \u003cdiv class=\"accordion-item\"\u003e\n                \u003cdiv class=\"accordion-heading\"\u003e\n                    \u003ch3\u003eSection 1\u003c/h3\u003e\n                    \u003cdiv class=\"icon\"\u003e\n                        \u003ci class=\"arrow right\"\u003e\u003c/i\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"accordion-content\"\u003e\n                    \u003cp\u003eUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!--Accordion item--\u003e\n    \n            \u003c!--Accordion item--\u003e\n            \u003cdiv class=\"accordion-item\"\u003e\n                \u003cdiv class=\"accordion-heading\"\u003e\n                    \u003ch3\u003eSection 2\u003c/h3\u003e\n                    \u003cdiv class=\"icon\"\u003e\n                        \u003ci class=\"arrow right\"\u003e\u003c/i\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"accordion-content\"\u003e\n                    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!--Accordion item--\u003e\n    \n            \u003c!--Accordion item--\u003e\n            \u003cdiv class=\"accordion-item\"\u003e\n                \u003cdiv class=\"accordion-heading\"\u003e\n                    \u003ch3\u003eSection 3\u003c/h3\u003e\n                    \u003cdiv class=\"icon\"\u003e\n                        \u003ci class=\"arrow right\"\u003e\u003c/i\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003cdiv class=\"accordion-content\"\u003e\n                    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\u003c/p\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003c!--Accordion item--\u003e\n    \n        \u003c/div\u003e\n    \n    \u003cscript src=\"path/to/bower_components/mn-accordion/dist/js/mn-accordion.min.js\"\u003e\u003c/script\u003e\n    \n    \u003cscript\u003e\n        (function () {\n            var accordion_1 = new Accordion(document.getElementById(\"accordion\"), {\n                collapsible: false\n            });\n        })();\n    \u003c/script\u003e\n    \n\u003c/body\u003e\n\n```\n\n## Available options:\n\n| Parameter | Type | Value | Description |\n|:---|:---|:---|:---|\n| eventName | `Enum\u003cString\u003e` | **click**, dblclick, mouseover  | Accordion item will slide down and up based on the event. Supports all HTML DOM Events |\n| eventDelay | `Number` | **0** | Delay the event untill given milliseconds, usefull if eventName is mouseover |\n| collapsible | `Boolean` | **true** | Enable all accordion items can be closed at once |\n| multiple | `Boolean` | **false** | Enable multiple accordion item can be opened at once |\n| defaultOpenedIndexes | `Integer \\| Array\u003cInteger\u003e` | **0** | Make accordion item default opened with given index. Pass **-1** for close all items as default. Array of indexes accepted if *multiple* option is *true*|\n| slideDuration | `Integer` | **200** | Slide up and down slideDuration by ms |\n| slideDownFn | `Function` | slideDownFn(el, slideDuration) {} | Slide down function. We are using css transitions |\n| slideUpFn | `Function` | slideUpFn(el, slideDuration) {} | Slide up function. We are using css transitions |\n\n## Available methods for *Accordion* instance:\n\n| Method | Parameters | Return | Description |\n|:---|:---|:---|:---|\n| openAccordionItemByIndex | `(index: Integer)` | `Void` | Open accordion item by given index |\n| closeAccordionItemByIndex | `(index: Integer)` | `Void` | Close accordion item by given index |\n\n\n# License\n\nMIT Licensed. Copyright (c) mike 2017.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykinayki%2Fmn-accordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaykinayki%2Fmn-accordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykinayki%2Fmn-accordion/lists"}