mgn-accordion

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