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 -S

Or Download raw data

↓ download "mgn-accordion.js"

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);