Accordion

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

Import

Import the Accordion primitives from ng-primitives/accordion.

import {
  NgpAccordion,
  NgpAccordionItem,
  NgpAccordionTrigger,
  NgpAccordionContent,
} from 'ng-primitives/accordion';

Usage

Assemble the accordion directives in your template.

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

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

Reusable Component

Create reusable components that uses the NgpAccordion and NgpAccordionItem directives.

Schematics

Generate a reusable accordion component using the Angular CLI.

ng g ng-primitives:primitive accordion

Options

• path: The path at which to create the component file.
• prefix: The prefix to apply to the generated component selector.
• componentSuffix: The suffix to apply to the generated component class name.
• fileSuffix: The suffix to apply to the generated component file name. Defaults to component.
• exampleStyles: Whether to include example styles in the generated component file. Defaults to true.

API Reference

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

NgpAccordion

Data Attributes

The following data attributes are applied to the ngpAccordion directive:

Attribute	Description	Value
data-orientation	The orientation of the accordion.	horizontal | vertical
data-disabled	Applied when the element is disabled.	-

NgpAccordionItem

Data Attributes

The following data attributes are applied to the ngpAccordionItem directive:

Attribute	Description	Value
data-orientation	The orientation of the accordion.	horizontal | vertical
data-open	Applied when the accordion item is open.	-
data-disabled	Applied when the accordion item is disabled.	-

NgpAccordionTrigger

Data Attributes

The following data attributes are applied to the ngpAccordionTrigger directive:

Attribute	Description	Value
data-orientation	The orientation of the accordion.	horizontal | vertical
data-open	Applied when the accordion item is open.	-
data-disabled	Applied when the accordion item is disabled.	-

NgpAccordionContent

Data Attributes

The following data attributes are applied to the ngpAccordionContent directive:

Attribute	Description	Value
data-orientation	The orientation of the accordion.	horizontal | vertical
data-open	Applied when the accordion item is open.	-

The following CSS custom properties are applied to the ngpAccordionContent directive:

Property	Description
--ngp-accordion-content-width	The width of the accordion content.
--ngp-accordion-content-height	The height of the accordion content.

Animations

The ngpAccordionContent primitive adds several CSS custom properties --ngp-accordion-content-width and --ngp-accordion-content-height to the element that can be used to animate the accordion content on open and close.

Global Configuration

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

import { provideAccordionConfig } from 'ng-primitives/accordion';

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

NgpAccordionConfig

Define whether only one or multiple accordion items can be open at a time. Define an accordion can be collapsed. This is only applicable when `type` is set to `single`. Define the orientation of the accordion.

Accessibility

Adheres to the Accordion WAI-ARIA design pattern.

Tip: Per APG, wrap each trigger button in a heading element (e.g., h3) or an element with role="heading" and an appropriate aria-level. Ensure the button is the only child of the heading.

Keyboard Interactions

• Space - Toggle the expanded state of the accordion item when the trigger is focused.
• Enter - Toggle the expanded state of the accordion item when the trigger is focused.

Hidden Until Found

The ngpAccordionContent primitive uses the until-found attribute to allow the browser to search text within the hidden region and reveal the section if a match is found. If the browser does not support this functionality, the attribute is ignored.

More information about the until-found attribute can be found on Can I use.