@itkyk/accordion

accordion

install

$ npm i @itkyk/accordion

How to use @itkyk/accordion

<div class="js-accordion">
  <div class="js-accordion-wrap">
    <div class="js-accordion-inner">
      <!--- Your Markup Contents --->
    </div>
  </div>
</div>

import Accordion from "@itkyk/accordion";

// Initialize
const option = {};
const accordion = new Accordion(".js-accordion", option)
/* OR
const accordion = new Accordion(document.querySelector(".js-accordion"), option)
*/
// add callbacks
accordion.setOpenCallback(() => {
  // add function
  console.log("open");
})

accordion.setCloseCallback(()=>{
  // add function
  console.log("close");
})

// start acrodion
accordion.mount();

// desctoy event listener & remove height
accordion.destroy();

Option

key	default	value	description
type	"toggle"	"toggle"	"divide"
button	".js-accordion-button"	string or HTMLElement	if type is toggle, open or close torigger className of dom
buttons	{open: ".js-accordion-button-open", close: ".js-accordion-button-close"}	{open: string or HTMLElement, close: string or HTMLElement}	if type is ``, open or close torigger of html elements className of each dom.
wrapper	".js-accordion-wrap"	string of HTMLElement	accordion wrapper hrml element or className of dom
inner	".js-accordion-inner"	string of HTMLElement	accordion inner html element or className of dom
initialHeight	null	null or number or className or Element	when be closing accordion, set height value. if setting null, .style.height = "";.

methods

key	description
mount	set accordion logics
destroy	remove addEventListeners
setOpenCallback	added function of when opening the accordion
setCloseCallback	added function of when closing the accordion
getOpenFlag	Getting open status. Return Value is true or false

vars

key	description
target	when initialize, set target DOM
button	when initialize, set button DOM or button DOMs
wrap	when initialize, set wrapper DOM
inner	when initialize, set inner DOM

Change Log

• v1.0.6
  • Corrected to remove wrapper height when destroying.
• v1.0.5
  • Fixed a bug when passing HTMLElement in option.