> ## Documentation Index
> Fetch the complete documentation index at: https://ng-primitives.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

> Display a series of panels that can be expanded or collapsed.

<iframe style={{ width: '100%', height: '378px', borderRadius: 12 }} src="https://ng-primitives.github.io/ng-primitives/#/examples/accordion" />

## Usage

Assemble the accordion directives in your template.

```html
<div ngpAccordion ngpAccordionType="single" ngpAccordionCollapsible>
  <div ngpAccordionItem ngpAccordionItemValue="item-1">
    <button ngpAccordionTrigger>Would you like to learn more?</button>
    <div ngpAccordionContent>If you would like to learn more please reach out to us on GitHub.</div>
  </div>

  <div ngpAccordionItem ngpAccordionItemValue="item-2">
    <button ngpAccordionTrigger>Can I use this in my project?</button>
    <div ngpAccordionContent>Yes, this is open source and you can use it in your project.</div>
  </div>
</div>
```

## API Reference

The following directives are available to import from the `@ng-primitives/ng-primitives/accordion` package:

### NgpAccordionDirective

<ResponseField name="ngpAccordionType" type="single | multiple" default="single">
  Define whether only one or multiple accordion items can be open at a time.
</ResponseField>

<ResponseField name="ngpAccordionCollapsible" type="boolean" default="false">
  Define an accordion can be collapsed. This is only applicable when `ngpAccordionType` is set to
  `single`.
</ResponseField>

<ResponseField name="ngpAccordionValue" type="T | T[]">
  Define the expanded accordion items. This should be a single value when `ngpAccordionType` is set
  to `single` and an array when set to `multiple`.
</ResponseField>

<ResponseField name="ngpAccordionDisabled" type="boolean" default="false">
  Define whether the accordion is disabled.
</ResponseField>

<ResponseField name="ngpAccordionOrientation" type="horizontal | vertical" default="vertical">
  Define the orientation of the accordion.
</ResponseField>

<ResponseField name="ngpAccordionValueChange" type="T | T[]">
  Emitted when the expanded accordion items change. This will be a single value when
  `ngpAccordionType` is set to `single` and an array when set to `multiple`.
</ResponseField>

### NgpAccordionItemDirective

<ResponseField name="ngpAccordionItemValue" type="T" required>
  Define the value of the accordion item.
</ResponseField>

<ResponseField name="ngpAccordionItemDisabled" type="boolean" default="false">
  Define whether the accordion item is disabled.
</ResponseField>

### NgpAccordionTriggerDirective

There are no inputs or outputs for this directive.

### NgpAccordionContentDirective

There are no inputs or outputs for this directive.

## Global Configuration

You can configure the default options for all accordions in your application by using the `provideNgpAccordionConfig` function in a providers array.

```ts
import { provideNgpAccordionConfig } from '@ng-primitives/ng-primitives/accordion';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgpAccordionConfig({
      type: 'multiple',
      collapsible: true,
      orientation: 'horizontal',
    }),
  ],
});
```

### NgpAccordionConfig

<ResponseField name="type" type="single | multiple">
  Define whether only one or multiple accordion items can be open at a time.
</ResponseField>

<ResponseField name="collapsible" type="boolean">
  Define an accordion can be collapsed. This is only applicable when `type` is set to `single`.
</ResponseField>

<ResponseField name="orientation" type="horizontal | vertical">
  Define the orientation of the accordion.
</ResponseField>

## Schematics

You can use our schematic to generate a new accordion component.

<CodeGroup>
  ```bash Angular CLI
  ng generate @ng-primitives/ng-primitives:accordion
  ```

  ```bash Nx
  nx generate @ng-primitives/ng-primitives:accordion
  ```
</CodeGroup>

### Options

<ResponseField name="name" type="string">
  The name of the component.
</ResponseField>

<ResponseField name="project" type="string">
  The name of the project to add the component to.
</ResponseField>

<ResponseField name="path" type="string">
  The path to create the component.
</ResponseField>