accordion-js

Include the CSS and JavaScript files directly in your HTML using unpkg.

<link rel="stylesheet" href="https://unpkg.com/accordion-js@3.4.1/dist/accordion.min.css" />
<script src="https://unpkg.com/accordion-js@3.4.1/dist/accordion.min.js"></script>

Install the accordion-js package and import the required JavaScript and CSS files into your project.

npm install accordion-js

import Accordion from "accordion-js";
import "accordion-js/dist/accordion.min.css";

To use the accordion, structure your HTML with a container and individual accordion items. Each item should consist of a header (containing a trigger button) and a panel. By default, the module looks for the following classes:

• Element: ac
• Trigger: ac-trigger
• Panel: ac-panel

<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>

Once an accordion is initialized, you can control it using the following methods:

| Method | Description | Arguments |
| --- | --- | --- |
| `attachEvents()` | Attach events | - |
| `detachEvents()` | Detach events | - |
| `open(idx)` | Open the accordion element at the given index | `idx` (element index) |
| `close(idx)` | Close the accordion element at the given index | `idx` (element index) |
| `toggle(idx)` | Toggle the accordion element at the given index | `idx` (element index) |
| `openAll()` | Open all accordion elements (without animation) | - |
| `closeAll()` | Close all accordion elements (without animation) | - |
| `update()` | Update the accordion (useful for lazy-loaded items) | - |
| `destroy()` | Destroy instance: opens elements, removes events, IDs & ARIA | - |

The Accordion constructor creates a new accordion instance.

Signature: new Accordion(container, options)

Parameters:

• container (required): A selector string, a DOM element, or an array of selector strings or HTMLElements that specify the accordion container(s).
• options (optional): A configuration object to customize behavior.

// Initialize with custom options
new Accordion(".container-second", {
  duration: 400,
  showMultiple: true,
  onOpen: function (currentElement) {
    console.log(currentElement);
  }
});

// Initialize multiple containers at once using an array of selectors
new Accordion([".container-first", ".container-second"], {});

// Initialize using an array of HTMLElements
const accordions = Array.from(document.querySelectorAll(".accordion-container"));
new Accordion(accordions, {});

Initialize the accordion by passing a selector string, a DOM element, or an array of either to the Accordion constructor.

<script>
  // Initialize using a selector
  new Accordion(".accordion-container");
</script>

The accordion-js project uses a Prettier configuration file (prettier.config.mjs) to enforce code style. When contributing or working on the codebase, ensure your local Prettier environment respects these settings to maintain consistency.

/** @type {import("prettier").Config} */
export default {
  printWidth: 120,
  bracketSameLine: true,
  bracketSpacing: false,
  trailingComma: "none",
  quoteProps: "consistent"
};