Accordion

New

Organize related content into sections that open when you need them.

Single or multipleCustom headersLazy content

Getting started

Open one section at a time. Use the buttons below to control the active section from outside the accordion.

Install Avero UI, import the standalone components you need and add them to your template. Each component works with Angular's reactive state.

Read the installation guide →

Getting started is open.

Multiple & dynamic panels

Keep several sections open. These panels are generated with an Angular for block and use custom header content.

Define the visual direction, explore layouts and create a shared component language.

Build reusable components, connect your data and validate behavior with automated tests.

Lazy content

The editor is created only when you first open the panel. Type a note, close the panel and reopen it: your draft stays in place.

Usage and API

Import AvAccordion, AvAccordionPanel, AvAccordionHeader and AvAccordionContent from avero-ui. Place one header and one content component inside each panel. Add AvAccordionLazy when you use a lazy template.

HTML

<av-accordion inputId="faq" [(value)]="active" [multiple]="false">
  <av-accordion-panel value="setup">
    <av-accordion-header>Getting started</av-accordion-header>
    <av-accordion-content>Your content goes here.</av-accordion-content>
  </av-accordion-panel>
  <av-accordion-panel value="settings">
    <av-accordion-header>Settings</av-accordion-header>
    <av-accordion-content>
      <ng-template avAccordionLazy>
        <app-settings />
      </ng-template>
    </av-accordion-content>
  </av-accordion-panel>
</av-accordion>

State. Accordion inputId must be unique on the page. Panel value is a stable string or number, unique within its accordion; 0 and '0' are distinct keys. Bind [(value)] to a key or null in single mode, or an array in multiple mode. multiple defaults to false. When switching modes, a scalar is treated as one key; single mode uses only the first array entry.

Events. onOpen and onClose emit value and originalEvent for user changes. Opening another panel in single mode also emits onClose for the previous panel. Programmatic changes do not emit these interaction events. Removing a dynamic panel preserves its key in your model; remove that key yourself if the panel should stay closed when added again.

Content lifecycle. Normal projected content is created immediately and hidden when closed. An ng-template avAccordionLazy inside AvAccordionContent delays creation until first open, then keeps the view alive. Closed content is hidden from keyboard navigation and assistive technology. Removing a panel destroys its content.

Accessibility. Headers are native buttons with aria-expanded and aria-controls. Content regions reference the matching header. headingLevel defaults to 3 and accepts levels 1–6. Arrow navigation wraps and skips disabled headers. Custom header content must be presentational: put links, buttons and inputs inside the content region.

Disabled and theme. disabled on the accordion or an individual panel prevents user toggles; external value updates still work. Controls inside open content manage their own disabled state. Override --av-accordion-accent, --av-accordion-background, --av-accordion-color, --av-accordion-content-color, --av-accordion-border, --av-accordion-radius and --av-accordion-hover.