just-accordion

JustAccordion

A simple and lightweight accordion plugin

Overview

• No dependencies.
  The library is written in pure JavaScript and requires no additional dependencies.

• Simplicity and functionality.
  Easily integrate and use the library to implement essential tab functionality.

• Accessibility.
  The plugin follows all accessibility best practices.

• CSS customization.
  Modify the appearance and layout effortlessly using CSS.

Installation

• Download the JS library just-accordion.min.js and the stylesheet just-accordion.min.css from the dist folder.
  Alternatively, install via NPM:

npm i just-accordion

• Include the files in your project:

<link rel="stylesheet" href="just-accordion.min.css">
<script src="just-accordion.min.js"></script>

Or (for module bundlers):

import 'just-accordion/dist/just-accordion.min.css';
import JustAccordion from 'just-accordion';

• Add the following HTML structure:

<div class="accordion">
  <details>
    <summary>Item</summary>
    <div>
      Content
    </div>
  </details>
  <details>
    <summary>Item</summary>
    <div>
      Content
    </div>
  </details>
  <details>
    <summary>Item</summary>
    <div>
      Content
    </div>
  </details>
</div>

The structure of each item is implemented using the HTML <details> tag. The trigger must be a <summary> tag, and the content must be a <div> tag.

• Initialize the library:

new JustAccordion( '.accordion' );

or

const accordion = document.querySelector( '.accordion' );
new JustAccordion( accordion );

Plugin Configuration

The JustAccordion constructor accepts two arguments:

• Required: A selector (string) or HTML element.
• Optional: A configuration object.

Properties

• el

Get accordion element:

const accordion = new JustAccordion( '.accordion' );
console.log( accordion.el ); // Outputting the accordion's HTML element

• isToggleMode

To enable single-item mode (only one accordion item open at a time), set the isToggleMode property to true in the configuration object:

new JustAccordion( '.accordion', {
	isToggleMode: true
} );

Important! isToggleMode ignores all open attributes in the markup. To open a specific item, use the active property.

• active

When using isToggleMode, specify which item to open by default using the active property with the item's index:

new JustAccordion( '.accordion', {
	isToggleMode: true,
  active: 1
} );

The active property only works with isToggleMode. To have multiple items open by default, don't enable isToggleMode and add the open attribute to desired elements.

• duration

To change the accordion's opening/closing speed, set the duration property in milliseconds:

new JustAccordion( '.accordion', {
	duration: 400
} );

You can also control the speed via CSS:

.accordion {
	--accordion-duration: 0.4s;
}

Default duration is 0.3s (set in just-accordion.min.css)

Events

• onInit

Triggered when the accordion initializes. Receives one argument: the accordion object.

new JustAccordion( '.accordion', {
	onInit: ( accordion ) => {
    // function body
	}
} );

• onClick

Triggered when clicking a summary element. Receives three arguments: the summary element, the accordion item, and the accordion object.

new JustAccordion( '.accordion', {
	onClick: ( summary, item, accordion ) => {
    // function body
	}
} );

• onOpen

Triggered when opening an accordion item. Unlike onOpenComplete, this fires immediately after click before internal processing. Receives two arguments: the accordion item and the accordion object.

new JustAccordion( '.accordion', {
	onOpen: ( item, accordion ) => {
		// function body
	}
} );

• onOpenComplete

Triggered after an accordion item has fully opened (after internal processing). Receives two arguments: the accordion item and the accordion object.

new JustAccordion( '.accordion', {
	onOpenComplete: ( item, accordion ) => {
		// function body
	}
} );

• onClose

Triggered when closing an accordion item. Unlike onCloseComplete, this fires immediately after click before internal processing. Receives two arguments: the accordion item and the accordion object.

new JustAccordion( '.accordion', {
	onClose: ( item, accordion ) => {
		// function body
	}
} );

• onCloseComplete

Triggered after an accordion item has fully closed (after internal processing). Receives two arguments: the accordion item and the accordion object.

new JustAccordion( '.accordion', {
	onCloseComplete: ( item, accordion ) => {
		// function body
	}
} );