Search code examples
ember.jsember-bootstrap

How to keep ember bootstrap accordion expanded by default?


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>

Solution

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