flex-accordion-js v1.0.3

Accordion-JS

npm i flex-accordion-js

A flexible accordion/tabbing module with optional callback support. Configuration requires an element ID along with an options object with the following properties:

• "callback" accepts a function to execute before view switching;
• "relationship" is either "child" (default), "sibling" or "external" (see example below);
• "external_container" takes an ID and is required if "external" relationship is chosen.

For all relationships, the clickable tabs needs the data-accordion attribute. For child relationships, the nested HTML element needs the data-accordion-target attribute. For external relationships, the data-accordion attribute requires a value matching the appropriate content view's ID. Remember, this ID must belong to the "external_container" element.

Example

<!-- Child -->
<ul id="my-accordion">
  <li data-accordion>
    <h3>Title</h3>
    <p data-accordion-target>My Content</p>
  </li>
</ul>


<!-- Sibling -->
<section id="my-accordion">
  <h3 data-accordion>Title</h3>
  <article>Anything goes here so long as it is directly after the tab.</article>
</section>


<!-- External -->
<ul id="my-accordion">
  <li data-accordion="name1">Change view elsewhere</li>
</ul>
<ul id="my-accordion-external-container">
  <li id="name1">Hey, I change!</li>
</ul>

import Accordion from 'flex-accordion-js';

const accordionInstance = new Accordion('my_ID_here', {
  callback: function(e){
    console.log('My Tab Opened!');
  },
  relationship: 'external',
  external_container: 'my_external_list'
  
});