https://github.com/maykinayki/mn-accordion
An accordion plugin with support of ES6 and SCSS
https://github.com/maykinayki/mn-accordion
accordion-plugin bower java javascript scss
Last synced: over 1 year ago
JSON representation
An accordion plugin with support of ES6 and SCSS
- Host: GitHub
- URL: https://github.com/maykinayki/mn-accordion
- Owner: maykinayki
- License: mit
- Created: 2017-12-03T20:13:29.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-12-05T11:42:54.000Z (over 8 years ago)
- Last Synced: 2025-03-27T10:07:41.715Z (over 1 year ago)
- Topics: accordion-plugin, bower, java, javascript, scss
- Language: JavaScript
- Homepage: https://maykinayki.github.io/mn-accordion
- Size: 26.4 KB
- Stars: 4
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
MN Accordion (ES6, SCSS)
============
An accordion plugin with support of ES6 and SCSS
## Demo & Examples
Live demo: [maykinayki.github.io/mn-accordion](http://maykinayki.github.io/mn-accordion/)
## Installation
Using yarn
```js
yarn add mn-accordion
```
Using npm
```js
npm install mn-accordion --save
```
You can then import plugin and its styles in your application as follows:
```js
import MNAccordion from 'mn-accordion';
import 'mn-accordion/dist/css/mn-accordion.css';
```
Using bower
```js
bower install mn-accordion --save
```
### HTML markup
By 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.
```html
...
Section 1
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.
Section 2
Lorem 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.
Section 3
Lorem 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.
(function () {
var accordion_1 = new Accordion(document.getElementById("accordion"), {
collapsible: false
});
})();
```
## Available options:
| Parameter | Type | Value | Description |
|:---|:---|:---|:---|
| eventName | `Enum` | **click**, dblclick, mouseover | Accordion item will slide down and up based on the event. Supports all HTML DOM Events |
| eventDelay | `Number` | **0** | Delay the event untill given milliseconds, usefull if eventName is mouseover |
| collapsible | `Boolean` | **true** | Enable all accordion items can be closed at once |
| multiple | `Boolean` | **false** | Enable multiple accordion item can be opened at once |
| defaultOpenedIndexes | `Integer \| Array` | **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*|
| slideDuration | `Integer` | **200** | Slide up and down slideDuration by ms |
| slideDownFn | `Function` | slideDownFn(el, slideDuration) {} | Slide down function. We are using css transitions |
| slideUpFn | `Function` | slideUpFn(el, slideDuration) {} | Slide up function. We are using css transitions |
## Available methods for *Accordion* instance:
| Method | Parameters | Return | Description |
|:---|:---|:---|:---|
| openAccordionItemByIndex | `(index: Integer)` | `Void` | Open accordion item by given index |
| closeAccordionItemByIndex | `(index: Integer)` | `Void` | Close accordion item by given index |
# License
MIT Licensed. Copyright (c) mike 2017.