UI Bootstrap Accordion in AngularJS

The accordion directive is built on top of the collapse directive which provides a list of items, with collapsible bodies which are collapsed or expanded by clicking on header of item.

Each accordion group’s body is transcluded into the body of the collapsible element.

Accordion heading

Instead of using heading attribute on the uib-accordion-group, you can also use an uib-accordion-heading element inside a group that will be used as the group’s header.

If you’re using a custom template for the uib-accordion-group, you’ll need to have an element for the heading to be transcluded into using uib-accordion-header (e.g. <div uib-accordion-header></div>).