PHPackages                             sjaakp/yii2-bandoneon - 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. sjaakp/yii2-bandoneon

ActiveYii2-extension

sjaakp/yii2-bandoneon
=====================

Lightweight accordion widget for Yii 2.0.

1.0.2(8y ago)52.1k1[1 issues](https://github.com/sjaakp/yii2-bandoneon/issues)[1 PRs](https://github.com/sjaakp/yii2-bandoneon/pulls)1MITJavaScript

Since Aug 2Pushed 1y ago1 watchersCompare

[ Source](https://github.com/sjaakp/yii2-bandoneon)[ Packagist](https://packagist.org/packages/sjaakp/yii2-bandoneon)[ RSS](/packages/sjaakp-yii2-bandoneon/feed)WikiDiscussions master Synced yesterday

READMEChangelog (2)Dependencies (1)Versions (3)Used By (1)

Bandoneon 2.0
=============

[](#bandoneon-20)

Lightweight accordion widget for Yii2
-------------------------------------

[](#lightweight-accordion-widget-for-yii2)

[![Latest Stable Version](https://camo.githubusercontent.com/e2401123ba52b4ecedd8dde7e4d803ff265808b52bff34e2002b65a1450e2248/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d62616e646f6e656f6e2f762f737461626c65)](https://packagist.org/packages/sjaakp/yii2-bandoneon)[![Total Downloads](https://camo.githubusercontent.com/208d0838e95e116bc11853f723dde0ce4c353715c5a2b30553f3600ad6ea1d9b/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d62616e646f6e656f6e2f646f776e6c6f616473)](https://packagist.org/packages/sjaakp/yii2-bandoneon)[![License](https://camo.githubusercontent.com/60750fb88a82e933e8408b4af95787de1784377e142d21d537d75ed17d9960f1/68747470733a2f2f706f7365722e707567782e6f72672f736a61616b702f796969322d62616e646f6e656f6e2f6c6963656e7365)](https://packagist.org/packages/sjaakp/yii2-bandoneon)

### Motivation

[](#motivation)

In my opinion, there are some issues with the standard [Yii2 JUI Accordion](http://www.yiiframework.com/doc-2.0/yii-jui-accordion.html) widget.

- The heading and the content of the sections must be provided as options to the widget, which is cumbersome.
- It generates HTML with hard wired class references, introducing new and probably unintended styling.
- It is overkill, being dependant on the complete jQuery UI library.

**Bandoneon** is a lightweight, versatile replacement widget for the JUI Accordion. The Javascript is less than 1400 bytes. It has no dependencies at all, so it could be used on jQuery-less pages.

[Here](http://sjaakpriester.nl/software/bandoneon) are some demo's of the **Bandoneon** widget.

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

[](#installation)

The preferred way to install **Bandoneon** is through [Composer](https://getcomposer.org/). Either add the following to the `require` section of your `composer.json` file:

```
"sjaakp/yii2-bandoneon": "*"

```

Or run:

```
composer require sjaakp/yii2-bandoneon "*"

```

You can manually install **Bandoneon** by [downloading the source in ZIP-format](https://github.com/sjaakp/yii2-bandoneon/archive/master.zip).

Usage
-----

[](#usage)

Use **Bandoneon** by enclosing the sections in straight HTML between calls to `Bandoneon::begin()` and `Bandoneon::end()`, like so:

```

    Heading 1
    Lorem ipsum ... felis ultricies.

    Heading 2
    Pellentesque aliquet ... placerat tincidunt.

		...

    Heading n
    Curabitur sit ... gravida nec turpis.

```

You can use any sensible HTML tags for the headings and the sections. For instance, this works just as well:

```

    Heading 1
    Lorem ipsum ... felis ultricies.

    Heading 2
    Pellentesque aliquet ... placerat tincidunt.

		...

    Heading n
    Curabitur sit ... gravida nec turpis.

```

**Bandoneon** makes no assumptions about the HTML of the headings and the sections. It uses the CSS selectors for odd and even elements to differentiate between them. The HTML in the sections, and in the headings as well, can be as convoluted as you like.

### Initially open

[](#initially-open)

If you want a section to be initially open, just add the class `"open"` to its heading, like so:

```
    ...
	Heading 2
    This section will be initially open...
	...

```

### Surrounding element

[](#surrounding-element)

By default, **Bandoneon** creates a `` as surrounding element. You can modify this by setting the `'tag'` option in `Bandoneon::begin()`.

This may come in handy if you want to create a **Bandoneon**, based on a HTML definition list ``:

```

    Heading 1
    Lorem ipsum ... felis ultricies.

    Heading 2
    Pellentesque aliquet ... placerat tincidunt.

		...

    Heading n
    Curabitur sit ... gravida nec turpis.

```

### Options

[](#options)

**Bandoneon** has two client options:

- `speed`: The speed of the opening and closing of a section, in pixels per second. Default: `200`.
- `timing`: The timing function of the animation. More information on [Mozilla developers network](https://developer.mozilla.org/en-US/docs/Web/CSS/single-transition-timing-function). Default: `ease-in-out`.

A very slow **Bandoneon** might be coded like this:

```

    Heading 1
    Lorem ipsum ... felis ultricies.

	...

```

Building bandoneon.js
---------------------

[](#building-bandoneonjs)

Be sure that `npm` [is installed](https://www.npmjs.com/get-npm).

Run `npm install`.

Run `rollup -c`.

###  Health Score

33

—

LowBetter than 75% of packages

Maintenance23

Infrequent updates — may be unmaintained

Popularity22

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity64

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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

Every ~942 days

Total

2

Last Release

2994d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/156f636aceedc73021a2bfafb5433271c2c55d6cf4bce06b12902c85b4b491f1?d=identicon)[sjaakp](/maintainers/sjaakp)

---

Top Contributors

[![sjaakp](https://avatars.githubusercontent.com/u/5585878?v=4)](https://github.com/sjaakp "sjaakp (8 commits)")

---

Tags

yii2extensionwidgetyiiaccordion

### Embed Badge

![Health badge](/badges/sjaakp-yii2-bandoneon/health.svg)

```
[![Health](https://phpackages.com/badges/sjaakp-yii2-bandoneon/health.svg)](https://phpackages.com/packages/sjaakp-yii2-bandoneon)
```

PHPackages © 2026

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