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" | select button type. | | 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.