Accordions

Accordions is a class which can be used to easily control the opening / closing of accordion content.

Installation

npm i accordions
yarn add accordions

HTML Usage

<section class="[ js-accordion ]">
  <div class="[ js-accordion--item ]">
    <div class="[ js-accordion--trigger ]">Heading Here</div>
    <div class="[ js-accordion--target ]">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut sodales lectus, ac dictum nibh. Sed commodo auctor leo eu rhoncus. Vivamus tincidunt porttitor leo, ac lacinia augue aliquet at. Nulla convallis, lorem at euismod blandit, odio lectus interdum erat, in ornare eros eros in velit. Fusce auctor ante leo, nec dictum augue efficitur ac. Vestibulum mattis velit eros, vel luctus dui elementum non. Ut leo diam, maximus eu mi eget, suscipit pharetra dolor. Donec laoreet vel ante a sagittis. Nam mattis, arcu id finibus imperdiet, libero metus fringilla dolor, in luctus orci arcu eu sapien. Sed sagittis maximus mi, nec imperdiet odio suscipit at. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum posuere ante vestibulum euismod mattis.</p>
    </div>
  </div>
</section>

import Accordion from 'accordions';

const AccordionContent = new Accordion(document.querySelector('.js-accordion'), {
  fps: 60,
  duration: 400,
  multiple: false,
});

Option	Type	Description	Default
fps	number	the number of frames per second that we animate the content	60
duration	number	number in milliseconds that the content will open or close in	400
multiple	boolean	if false opening an item will close the others	false

Adding Accordion Items

AccordionContent.add(element, {
  active: false,
  minHeight: 0,
  trigger: element.firstElementChild,
  target: element.lastElementChild,
});

The add method will load the accordion with a new item. the tween() method takes 2 arguments. The first argument is the element containing the accordion content. The second argument is the user options

Option	Type	Description	Defaults
active	boolean	If true the item will be open on page load	false
minHeight	number	Just in case you dont want the accordion to close all the way	0
trigger	element	The element that we will click on to open the accordion item	the accordion item element's first child
target	element	The element that we will open and close to reveal some content	the accordion item element's last child

License

MIT