Bandoneon
Lightweight accordion widget for Yii 2.0.

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.

Default functionality

Other HTML (just p's)

Section 2 initially open

Very slow

Defintion list (dl)

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mattis tincidunt ipsum, vitae consequat erat mattis vel. Phasellus auctor pretium egestas. Etiam lacinia ante in leo fermentum elementum. Suspendisse pulvinar eros et erat suscipit, sed auctor dui sollicitudin. Morbi sit amet neque libero. Cras augue lacus, aliquam quis imperdiet sit amet, faucibus sit amet arcu. Vestibulum dapibus lacus vitae tempus rutrum. Aenean rutrum augue tincidunt ante aliquet, at adipiscing felis ultricies.

Heading 2

Pellentesque aliquet sit amet lectus at vestibulum. Ut in molestie lorem, in sodales dui. Nunc tempor auctor mi, a tristique elit molestie laoreet. Integer sit amet volutpat est, nec euismod libero. Praesent vulputate sapien at volutpat imperdiet. In ac justo et augue dignissim molestie. Morbi mollis lectus nunc, ac rhoncus ipsum dignissim at. Suspendisse rutrum non magna in venenatis. Proin aliquet eleifend mauris at viverra. Integer sodales dolor ut placerat tincidunt.

Heading 3

Aenean convallis justo in erat aliquet, in viverra nisi lacinia. Duis ut mi a ipsum auctor semper. Morbi malesuada, metus congue dapibus placerat, turpis tellus pellentesque massa, vel elementum lacus urna a nulla. Nulla bibendum nisl ipsum, nec adipiscing felis fermentum suscipit. Vivamus malesuada nisi sed interdum mattis. Sed consequat, massa eu porta lacinia, nulla lacus gravida ante, iaculis feugiat arcu nibh eget mi. Praesent ullamcorper eros ut viverra porta. Donec tristique suscipit arcu ac porta. Vivamus ullamcorper sit amet dolor sed ornare. Nullam faucibus eu eros feugiat ullamcorper. Vestibulum eget consectetur lectus. Proin rutrum, libero a ullamcorper venenatis, sem lacus luctus massa, eu hendrerit quam urna ut lectus. Quisque ut lacus a dolor facilisis rutrum. Quisque nec semper nisi.

Heading 4

Donec eu metus nec velit suscipit vulputate. Suspendisse potenti. Sed tellus urna, volutpat ut adipiscing in, bibendum at sem. Phasellus bibendum urna velit, et porttitor libero fermentum quis. Proin quis purus felis. Cras sit amet massa risus. Quisque hendrerit, ligula in rutrum consectetur, nunc enim lobortis est, nec pretium velit enim in nisi. Morbi ut ultricies purus. Aenean scelerisque mi at eros convallis ornare.

Heading 5

Curabitur sit amet diam lacus. Vestibulum orci augue, viverra non quam ac, volutpat faucibus lorem. Morbi in augue neque. Donec eget nisl et ante lacinia fringilla. Nulla vitae turpis eu erat malesuada tincidunt vel eu risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget augue non neque consectetur facilisis. Suspendisse hendrerit lectus nisi, et sollicitudin nisl rhoncus at. Curabitur dapibus sagittis odio id tincidunt. Mauris a neque euismod metus vulputate gravida sit amet quis justo. Sed volutpat, risus in tempus porta, velit mi blandit sem, eu consectetur turpis nibh eget enim. Fusce id nulla vitae metus eleifend tincidunt in vel turpis. Mauris urna ipsum, dignissim nec accumsan in, gravida nec turpis.