PHPackages                             levmyshkin/accordion - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. levmyshkin/accordion

ActiveDrupal-library

levmyshkin/accordion
====================

Lightweight and accessible accordion module with an extensible API.

3.4.1(1mo ago)014(MIT)JavaScript

Since Jul 12Pushed 1mo agoCompare

[ Source](https://github.com/levmyshkin/Accordion)[ Packagist](https://packagist.org/packages/levmyshkin/accordion)[ Docs](https://michu2k.github.io/Accordion/)[ RSS](/packages/levmyshkin-accordion/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

Accordion
=========

[](#accordion)

Lightweight and accessible accordion module with an extensible API. With the module you can create accordion on your website, useful especially for creating FAQ lists.

Version
-------

[](#version)

3.4.1

Installation
------------

[](#installation)

###### npm

[](#npm)

Install the package & import files

```
npm install accordion-js

```

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

###### CDN

[](#cdn)

Include files using CDN.

```
https://unpkg.com/accordion-js@3.4.1/dist/accordion.min.css
https://unpkg.com/accordion-js@3.4.1/dist/accordion.min.js

```

```

```

###### Github

[](#github)

You can also download files from Github and attach them manually to your project.
Note: On production use files (JS and CSS) only from **dist/** folder.

Usage
-----

[](#usage)

###### Include files

[](#include-files)

See the section above.

###### Create HTML layout

[](#create-html-layout)

This is just an example of a layout. You can create your own HTML structure.

```

      Lorem ipsum dolor sit amet.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Lorem ipsum dolor sit amet.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      Lorem ipsum dolor sit amet.

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

```

###### Initialize the module

[](#initialize-the-module)

```

  new Accordion(".accordion-container");

```

API
---

[](#api)

###### Examples

[](#examples)

new Accordion(container, options)

- `container` - *string | HTMLElement | Array<string | HTMLElement> (required)*, A selector string, a DOM element, or an array of selector strings or HTMLElements that specify the accordion container(s).
- `options` - *object (optional)*, Configuration options for the accordion. See the table below for available options.

```
// Default options
new Accordion(".container-first");

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

// Define several accordions with the same options (pass an array with selectors)
new Accordion([".container-first", ".container-second"], {});

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

// Detach events
const accordion = new Accordion(".container-first");
accordion.detachEvents();
```

###### Options

[](#options)

OptionTypeDefault valueDescriptiondurationnumber500Animation duration in msariaEnabledbooleantrueAdd ARIA elements to the HTML structurecollapsebooleantrueAllow collapse expanded panelshowMultiplebooleanfalseShow multiple elements at the same timeonlyChildNodesbooleantrueDisabling this option will find all items in the container. Warning: Setting to `false` will break the functionality of nested accordionsopenOnInitarray\[\]Show accordion elements during initializationelementClassstring"ac"Element classtriggerClassstring"ac-trigger"Trigger classpanelClassstring"ac-panel"Panel classactiveClassstring"is-active"Active element classbeforeOpenfunction-Calls before the item is opened.
 `beforeOpen: (currElement) => {}`onOpenfunction-Calls when the item is opened.
 `onOpen: (currElement) => {}`beforeClosefunction-Calls before the item is closed.
 `beforeClose: (currElement) => {}`onClosefunction-Calls when the item is closed.
 `onClose: (currElement) => {}`###### Methods

[](#methods)

OptionDescriptionArgumentsattachEvents()Attach events-detachEvents()Detach events-open()Open the accordion element with the given idx
 E.g. `acc.open(1)``idx` - element indexclose()Close the accordion element with the given idx
 E.g. `acc.close(1)``idx` - element indextoggle()Toggle the accordion element with the given idx
 E.g. `acc.toggle(1)``idx` - element indexopenAll()Open all accordion elements (without animation)-closeAll()Close all accordion elements (without animation)-update()If there are new items added by lazy load, you can run this method to update the Accordion-destroy()Destroy accordion instance:
 Open elements, remove events, IDs & ARIA-v3 Release Info
---------------

[](#v3-release-info)

There have been a lot of changes to the API in version `3.0.0`, so if you are using previous versions of the accordion (`2.8.0` and below), I recommend updating the package to the latest version with new structure and options.

License
-------

[](#license)

This project is under the MIT license.

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance90

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity33

Early-stage or recently created project

 Bus Factor1

Top contributor holds 79.4% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Unknown

Total

1

Last Release

50d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/1680925?v=4)[Ivan Abramenko](/maintainers/levmyshkin)[@levmyshkin](https://github.com/levmyshkin)

---

Top Contributors

[![michu2k](https://avatars.githubusercontent.com/u/22056149?v=4)](https://github.com/michu2k "michu2k (158 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (32 commits)")[![Pustur](https://avatars.githubusercontent.com/u/13663338?v=4)](https://github.com/Pustur "Pustur (5 commits)")[![janmarkuslanger](https://avatars.githubusercontent.com/u/26633123?v=4)](https://github.com/janmarkuslanger "janmarkuslanger (1 commits)")[![levmyshkin](https://avatars.githubusercontent.com/u/1680925?v=4)](https://github.com/levmyshkin "levmyshkin (1 commits)")[![TristanAG](https://avatars.githubusercontent.com/u/2434644?v=4)](https://github.com/TristanAG "TristanAG (1 commits)")[![xemlock](https://avatars.githubusercontent.com/u/952555?v=4)](https://github.com/xemlock "xemlock (1 commits)")

---

Tags

drupalcanvas

### Embed Badge

![Health badge](/badges/levmyshkin-accordion/health.svg)

```
[![Health](https://phpackages.com/badges/levmyshkin-accordion/health.svg)](https://phpackages.com/packages/levmyshkin-accordion)
```

###  Alternatives

[composer/installers

A multi-framework Composer library installer

1.4k148.8M7.2k](/packages/composer-installers)[drupal/console

The Drupal CLI. A tool to generate boilerplate code, interact with and debug Drupal.

92915.2M161](/packages/drupal-console)[drupal/drupal-extension

Drupal extension for Behat

22216.0M182](/packages/drupal-drupal-extension)[drupal/core-composer-scaffold

A flexible Composer project scaffold builder.

5346.5M614](/packages/drupal-core-composer-scaffold)[palantirnet/drupal-rector

Instant fixes for your Drupal code by using Rector.

1605.0M35](/packages/palantirnet-drupal-rector)[mnsami/composer-custom-directory-installer

A composer plugin, to help install packages of different types in custom paths.

1485.6M67](/packages/mnsami-composer-custom-directory-installer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)