mgn-accordion

Implement accordion function.

https://github.com/frontend-isobar-jp/mgn-accordion

Default


let mgnAccordion = new mgnAccordion(".j-accordion");


<div class="accordion">
	<button class="accordion_btn">Button</button>
	<div class="accordion_detail">
		<div class="inner">text text</div>
	</div>
</div>

text text text text text text text text
text text text text text text text text

Option


let mgnAccordion2 = new mgnAccordion(
	".j-accordion2",
	{
		toggleSpeed: 200,
		btnElm: "dt",
		detailElm: "dd"
	}
);

Opened

Button: text text text text text text text text
text text text text text text text text


<dl class="j-accordion2">
	<dt class="active">Opened</dt>
	<dd class="active">
		<div class="inner">text text</div>
	</dd>
</dl>

Open( element );

Button: text text text text text text text text
text text text text text text text text


mgnAccordion2.Open( ".open" );


<dl class="j-accordion2">
	<dt class="open">Opened</dt>
	<dd>
		<div class="inner">text text</div>
	</dd>
</dl>

Close( element );

Button: text text text text text text text text
text text text text text text text text


mgnAccordion2.Close( ".close" );


<dl class="j-accordion2">
	<dt class="active close">Opened</dt>
	<dd>
		<div class="inner">text text</div>
	</dd>
</dl>