Components.Accordion public

Bootstrap-style accordion group, with collapsible/expandable items.


Use as a block level component with any number of yielded Components.AccordionItem components as children:

<BsAccordion as |acc|>
  <acc.item @value={{1}} @title="First item">
    <p>Lorem ipsum...</p>
    <button {{on "click" (fn acc.change 2)}}>
  <acc.item @value={{2}} @title="Second item">
    <p>Lorem ipsum...</p>
  <acc.item @value={{3}} @title="Third item">
    <p>Lorem ipsum...</p>

In the example above the first accordion item utilizes the yielded change action to add some custom behaviour.

Note that only invoking the component in a template as shown above is considered part of its public API. Extending from it (subclassing) is generally not supported, and may break at any time.

Item Index


isSelected unknown private

The value of the currently selected accordion item

itemComponent {String} private

selected unknown public

The value of the currently selected accordion item. Set this to change selection programmatically.

When the selection is changed by user interaction this property will not update by using two-way bindings in order to follow DDAU best practices. If you want to react to such changes, subscribe to the onChange action



Action when the selected accordion item is about to be changed.

You can return false to prevent changing the active item, and do that in your action by setting the selected accordingly.

Event Payload:

  • newValue Object
  • oldValue Object