Accordion

Vertically collapsing sections built on native <details> and <summary> elements.

Bootstrap’s accordion docs describe the markup and CSS.

Example

Items that share a group open one at a time, like Bootstrap’s exclusive accordion. Add the open attribute to show an item at first.

Accordion item #1

This is item #1’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #2

This is item #2’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #3

This is item #3’s body. The native <details> element handles showing and hiding without any JavaScript.

HTML

<div bsAccordion>
  <details bsAccordionItem open>
    <summary bsAccordionHeader>Accordion item #1</summary>
    <div bsAccordionBody>
      <strong>This is item #1’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #2</summary>
    <div bsAccordionBody>
      <strong>This is item #2’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #3</summary>
    <div bsAccordionBody>
      <strong>This is item #3’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
</div>

Theme and size

Use theme to color open items and size="sm" for a compact accordion.

Accordion item #1

This is item #1’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #2

This is item #2’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #3

This is item #3’s body. The native <details> element handles showing and hiding without any JavaScript.

HTML

<div bsAccordion theme="primary" size="sm">
  <details bsAccordionItem open>
    <summary bsAccordionHeader>Accordion item #1</summary>
    <div bsAccordionBody>
      <strong>This is item #1’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #2</summary>
    <div bsAccordionBody>
      <strong>This is item #2’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #3</summary>
    <div bsAccordionBody>
      <strong>This is item #3’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
</div>

Always open and flush

Set [exclusive]="false" to let several items stay open. Add flush to remove the outer borders.

Accordion item #1

This is item #1’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #2

This is item #2’s body. The native <details> element handles showing and hiding without any JavaScript.

Accordion item #3

This is item #3’s body. The native <details> element handles showing and hiding without any JavaScript.

HTML

<div bsAccordion [exclusive]="false" flush>
  <details bsAccordionItem open>
    <summary bsAccordionHeader>Accordion item #1</summary>
    <div bsAccordionBody>
      <strong>This is item #1’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #2</summary>
    <div bsAccordionBody>
      <strong>This is item #2’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Accordion item #3</summary>
    <div bsAccordionBody>
      <strong>This is item #3’s body.</strong> The native <code>&lt;details&gt;</code> element
      handles showing and hiding without any JavaScript.
    </div>
  </details>
</div>

Two-way binding

Bind [(open)] on an item to control it from your component. The binding also updates when the user opens or closes the item.

Shipping (closed)

Orders ship within two working days.

Returns

Return any item within 30 days.

<div class="d-flex gap-2 mb-3">
  <button type="button" bsButton="subtle" theme="secondary" size="sm" (click)="shipping.set(true)">
    Open shipping
  </button>
  <button type="button" bsButton="subtle" theme="secondary" size="sm" (click)="shipping.set(false)">
    Close shipping
  </button>
</div>
<div bsAccordion [exclusive]="false">
  <details bsAccordionItem [(open)]="shipping">
    <summary bsAccordionHeader>Shipping ({{ shipping() ? 'open' : 'closed' }})</summary>
    <div bsAccordionBody>Orders ship within two working days.</div>
  </details>
  <details bsAccordionItem>
    <summary bsAccordionHeader>Returns</summary>
    <div bsAccordionBody>Return any item within 30 days.</div>
  </details>
</div>

API

BsAccordion

Selector: [bsAccordion] · Exported as: bsAccordion

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of open items.
`size`	`'sm' \| 'md'`	`'md'`	Accordion size.
`flush`	`boolean`	`false`	Removes the outer borders and rounded corners.
`exclusive`	`boolean`	`true`	Allows only one item to be open at a time.
`name`	`string`	`generated`	Group name shared by the <details> elements.

BsAccordionItem

Selector: details[bsAccordionItem] · Exported as: bsAccordionItem

Inputs

Name	Type	Default	Description
`open`	`boolean`	`false`	Whether the item is open. Supports [(open)].

Outputs

Name	Type	Description
`openChange`	`boolean`	Emits when the user opens or closes the item.

Methods

Name	Type	Description
`show()`	`void`	Opens the item.
`hide()`	`void`	Closes the item.
`toggle()`	`void`	Toggles the item.
`isOpen`	`Signal<boolean>`	Current open state.

BsAccordionHeader

Selector: summary[bsAccordionHeader]

BsAccordionBody

Selector: [bsAccordionBody]