Semantic AJAX-enabled Accordion JavaScript Library – Jaccordion

Preview:

Description:

Jaccordion is a simple, smooth, semantic, SEO-friendly accordion component written in pure JavaScript (ES6).

How to use it:

Install & download.

# NPM
$ npm install @giodelabarrera/jaccordion --save

Import the Jaccordion as a module.

import Jaccordion from '@giodelabarrera/jaccordion'

Import the stylesheet.

@import 'node_modules/@giodelabarrera/jaccordion/dist/sass/jaccordion'

Or directly include the JavaScript and Stylesheet from CDN.

<link href="https://unpkg.com/@giodelabarrera/jaccordion@VERSION/dist/css/jaccordion.css" rel="stylesheet">
<script src="https://unpkg.com/@giodelabarrera/jaccordion@VERSION/dist/jaccordion.js"></script>

Build the HTML structure for the accordion.

<dl>
  <dt>Section 1</dt>
  <dd>
    <p>Section 1 Content</p>
  </dd>
  <dt>Section 2</dt>
  <dd>
    <p>Section 2 Content</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Section 3 Content</p>
  </dd>
</dl>

Initialize the Jaccordion and done.

new Jaccordion(document.querySelector('dl')).mount()

Config the accordion:

new Jaccordion(document.querySelector('dl'), {
    /**
     * Identifier of the item that appears open by default
     * @type {Number}
     */
    openAt: 0,
    /**
     * Determines if there may be more than one item open
     * @type {Boolean}
     */
    multiple: false,
    /**
     * Entries to make items
     * @type {Object[]}
     */
    entries: [],
    /**
     * Object for make items by request
     * @type {Object}
     */
    ajax: {
      url: '',
      processResults: function processResults(data) {
        return data;
      }
    },
    /**
     * Object with classes for styles
     * @type {Object}
     */
    classes: {
      root: 'jaccordion',
      header: 'jaccordion__header',
      opened: 'jaccordion__header--opened',
      content: 'jaccordion__content'
    }
})

More API methods.

// Disable the accordion
instance.disable()
// Enable the accordion
instance.enable()
// Toogle an item
instance.toggle(id)
// Check if is open
instance.isOpen(id)
// Open an item
instance.open(id)
// Close an item
instance.close(id)
// Append an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
instance.append(entry)
// Prepand an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
instance.prepend(entry)
// Append an item before an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
// @param: Number referenceId
instance.appendBefore(entry, referenceId)
// Append an item after an item from entry
// @param: Object entry
// @param: Number entry.id
// @param: String entry.header
// @param: String entry.content
// @param: Number referenceId
instance.appendAfter(entry, referenceId)
// Remove an item
instance.remove(id)
// Unmout the accordion
instance.unmount()

Event handlers.

instance.on('mount.before', () => {
  // do something
})
instance.on('mount.after', () => {
  // do something
})
instance.on('open.before', (item) => {
  // do something
})
instance.on('open.after', (item) => {
  // do something
})
instance.on('close.before', (item) => {
  // do something
})
instance.on('close.after', (item) => {
  // do something
})
instance.on('append', (item) => {
  // do something
})
instance.on('prepend', (item) => {
  // do something
})
instance.on('appedn.before', (item) => {
  // do something
})
instance.on('appedn.after', (item) => {
  // do something
})
instance.on('remove.before', (item) => {
  // do something
})
instance.on('remove.after', (item) => {
  // do something
})
instance.on('unmount', () => {
  // do something
})
instance.on('ajaxEntries.before', () => {
  // do something
})
instance.on('ajaxEntries.after', () => {
  // do something
})