1. Requirements
2. Usage
3. Resources

In my opinion, there are some issues with the standard Yii2 JUI Accordion 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 700 bytes. It only depends on jQuery core, which you would have loaded in your page anyway.

Requirements ¶

Yii 2.0

Usage ¶

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

<?php use sjaakp\bandoneon\Bandoneon; ?>

<?php Bandoneon::begin() ?>

    <h4>Heading 1</h4>
    <div>Lorem ipsum ... felis ultricies.</div>
	
    <h4>Heading 2</h4>
    <div>Pellentesque aliquet ... placerat tincidunt.</div>
	
	...
	    
    <h4>Heading n</h4>
    <div>Curabitur sit ... gravida nec turpis.</div>

<?php Bandoneon::end() ?>

You can use any sensible HTML tags for the headings and the sections. Bandoneon makes no assumptions about the HTML of the headings and the sections. It uses the jQuery selectors :odd and :even to differentiate between them. The HTML in the sections, and in the headings as well, can be as convoluted as you like.

Resources ¶

• Project page with documentation
• Try out a demo