Lorem ipsum...

Lorem ipsum...

Lorem ipsum...

How to keep ember bootstrap accordion expanded by default?

105 views Asked by At

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>
1

There are 1 answers

2
jelhan On BEST ANSWER

<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.