We're using a set of accordion directives and matching exactly the markup of the Bootstrap's accordion. On top we generate appropriate css classes, provide a11y and animations out of the box. Main advantage of this approach (vs. using components) is that all DOM nodes are accessible, so you can easily add missing functionality and customize the look and feel.
The code for a minimal one-panel accordion would look like this:
If you want to work with the accordion API, you can get either accordion or item instances from the template.
If an item id is not provided as in the example above, it will be generated automatically in the
'ngb-accordion-item-XXX'
format.
For more details please refer to the complete API
By default accordion allows opening as many panels as you want. If you need to have only one panel opened at a time,
you should use [closeOthers]
input. See example.
You can choose to either keep or remove the DOM nodes of the panels that are not opened. This is done by using the
[destroyOnHide]
either at the accordion level or at the item level. See
example.
Ypu can be notified when an item is shown or hidden with the (shown)
/(hidden)
outputs.
Payload is the id of the panel being toggled. These events will be fired after the animation is done.
You can provide a different template for accordion headers. In this case we would recommend changing the
ngbAccordionHeader
markup and using ngbAccordionToggle
on the element that toggles a
panel. Standard ngbAccordionButton
directive should be used with default
h2 > button
markup and might add unwanted .accordion-button
class.
You should also remove the .accordion-button::after
chevron, if you want to use default
.accordion-button
class as a starting point.
Please see a working example for more details