0

what attribute should I pass to keep bootstrap accordion open.

<BsAccordion as |acc|>
  <acc.item @value={{1}} @title="First item">
    <p>Lorem ipsum...</p>
    <button {{on "click" (fn acc.change 2)}}>
      Next
    </button>
  </acc.item>
  <acc.item @value={{2}} @title="Second item">
    <p>Lorem ipsum...</p>
  </acc.item>
  <acc.item @value={{3}} @title="Third item">
    <p>Lorem ipsum...</p>
  </acc.item>
</BsAccordion>
jelhan
  • 6,149
  • 1
  • 19
  • 35
TheLiquidCharcoal
  • 163
  • 7

1 Answers1

0

<BsAccordion> component provided by Ember Bootstrap has a @selected argument. The AccordionItem, which @value argument matches the @selected argument, will be open.

The example given above will show the item with title "Second item" as open.

<BsAccordion @selected={{2}} as |ac|>
  <acc.item @value={{1}} @title="First item">
    <p>Lorem ipsum...</p>
  </acc.item>
  <acc.item @value={{2}} @title="Second item">
    <p>Lorem ipsum...</p>
  </acc.item>
  <acc.item @value={{3}} @title="Third item">
    <p>Lorem ipsum...</p>
  </acc.item>
</BsAccordion>

Please note that this does not prevent the user from changing the currently open item. Doing so could be achieved by resetting @selected in the @onChange event.

jelhan
  • 6,149
  • 1
  • 19
  • 35
  • One more, if you can help with a way i can keep all the accordions open at first. – TheLiquidCharcoal Feb 21 '21 at 22:21
  • Bootstrap's [accordion component](https://getbootstrap.com/docs/5.0/components/accordion/) does not support having multiple items open at the same time. Neither Ember Bootstrap's [`` component](https://www.ember-bootstrap.com/components/accordion) does. – jelhan Feb 22 '21 at 19:08