AccordionPanel — Angular

The content panel of an accordion item that is conditionally visible.

API

class AccordionPanel {
  readonly element: HTMLElement;
  readonly id: InputSignal<any>;
  readonly visible: Signal<boolean>;
  expand(): void;
  collapse(): void;
  toggle(): void;
}

element

HTMLElement

A reference to the trigger element.

id

InputSignal<any>

A global unique identifier for the panel.

visible

Signal<boolean>

Whether the accordion panel is visible. True if the associated trigger is expanded.

expand

void

Expands this item.

@returnsvoid

collapse

void

Collapses this item.

@returnsvoid

toggle

void

Toggles the expansion state of this item.

@returnsvoid

Description

The content panel of an accordion item that is conditionally visible.

This directive is a container for the content that is shown or hidden. It should expose a template reference that will be used by the corresponding ngAccordionTrigger. The content within the panel should be provided using an ng-template with the ngAccordionContent directive so that the content is not rendered on the page until the trigger is expanded. It applies role="region" for accessibility and uses the inert attribute to hide its content from assistive technologies when not visible.

<div ngAccordionPanel #panel="ngAccordionPanel">
  <ng-template ngAccordionContent>
    <p>This content is lazily rendered and will be shown when the panel is expanded.</p>
  </ng-template>
</div>