0.0.7 • Published 5 years ago
mgn-accordion v0.0.7
mgn-accordion ( Don't Need jQuery )
Implement accordion function.
- Target browser : IE9+
- In case of IE9, opening and closing accordion without transition.
Install
npm i mgn-accordion -SOr Download raw data
Import
import mgnAccordion from 'mgn-accordion';Constructor
new mgnAccordion(element [, option]);| Argument | Data type | Default | Descroption |
|---|---|---|---|
| element | String | -(Required) | Specify target element.ex) ".accordion" |
| option | Object | - | ex) option = { toggleSpeed: 100, btnElm: "dl dt", detailElm: "dl dd"} |
| Option | Data type | Default | Descroption |
|---|---|---|---|
| toggleSpeed | Number | 0 | Adjust opening and closing speed. |
| btnElm | String | ".j-accordion_btn"(In case of “.j-accordion”) | Specify element to be button. |
| detailElm | String | ".j-accordion_detail"(In case of “.j-accordion”) | Specify element to be content. |
Method
| Method | Argument | Descroption |
|---|---|---|
| Toggle( element ) | String | Operate closing and opening of the accordion designated by element.( ex: ".default_open" ) |
| Open( element ) | String | Open the accordion designated by element. |
| Close( element ) | String | Close the accordion designated by element. |
| OpenEnd = function(){}; | Function | To be executed after opening accordion. |
| CloseEnd = function(){}; | Function | To be executed after closing accordion. |
Demo
https://frontend-isobar-jp.github.io/mgn-accordion/
import mgnAccordion from 'mgn-accordion';
let accordion = new mgnAccordion(".j-accordion");
accordion.OpenEnd = function(){
console.log("OpenEnd");
};
accordion.CloseEnd = function(){
console.log("CloseEnd");
};
////
let accordion2 = new mgnAccordion(
".j-accordion2",
{
toggleSpeed: 200,
btnElm: "dt",
detailElm: "dd"
}
);
setTimeout(function() {
accordion2.Open( ".open" );
},1000);
setTimeout(function() {
accordion2.Close(".close");
},2000);