ds-accordions ( Don't Need jQuery )

ds-accordionsは、jQueryを必要としないアコーディオン機能のライブラリです。

• Target browser : IE9+
• IE9の場合は transition 無しでアコーディオンが開閉します。

Install

npm i ds-accordions -S

Import

import DsAccordions from 'ds-accordions';

Constructor

new DsAccordions(element [, option]);

|Argument|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |element|String|-(Required)|対象要素を指定します。ex) ".accordion"| |option|Object|-|ex) option = { toggleSpeed: 100, btnElm: "dl dt", detailElm: "dl dd"}|

|Option|Data type|Default|Descroption| |:-------|:--------|:------|:----------| |toggleSpeed|Number|0|開閉のスピードを調節できます。| |btnElm|String|".accordion_btn"(“.accordion”の場合)|ボタンとなる要素を指定できます。| |detailElm|String|".accordion_detail"(“.accordion”の場合)|内容となる要素を指定できます。|

Method

|Method|Argument|Descroption| |:-------|:--------|:------| |Toggle( element )|String|element で指定したアコーディオンの開閉を操作します。( ex: ".default_open" )| |Open( element )|String|element で指定したアコーディオンを開きます。| |Close( element )|String|element で指定したアコーディオンを閉じます。| |OpenEnd = function(){};|-|アコーディオンが開いた後に実行されます。| |CloseEnd = function(){};|-|アコーディオンが閉じた後に実行されます。|

Demo

https://dsflon.github.io/ds-accordion/

import DsAccordions from 'ds-accordions';

let DsAccordions = new DsAccordions(".accordion");

DsAccordions.OpenEnd = function(){
    console.log("OpenEnd");
};
DsAccordions.CloseEnd = function(){
    console.log("CloseEnd");
};

////

let DsAccordions2 = new DsAccordions(
	".accordion2",
	{
		toggleSpeed: 200,
		btnElm: "dt",
		detailElm: "dd"
	}
);

setTimeout(function() {
    DsAccordions2.Open( ".open" );
},1000);
setTimeout(function() {
    DsAccordions2.Close(".close");
},2000);