Accordion

An accordion is a group of vertically stacked headings used to toggle the visibility of a section of content.

Components

DaffAccordionComponent

import { DaffAccordionComponent } from '@daffodil/design/accordion'

A wrapper for grouping accordion items.

@Component()
class DaffAccordionComponent {}

DaffAccordionItemComponent

import { DaffAccordionItemComponent } from '@daffodil/design/accordion'

The wrapper for the title and content. It handles the expansion and collapse of the inner content when clicked. All daff-accordion-items should be grouped inside the daff-accordion component.

@Component()
class DaffAccordionItemComponent implements OnInit, DaffOpenable {
  @Input() itemId: string = 'daff-accordion-item' + '-' + ++daffAccordionItemId
  @Input() contentId: string = 'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId
  @Input() initiallyExpanded: boolean = false
  @Input() disabled: boolean = false

  reveal(): void
  hide(): void
  toggle(): void
}

() Methods

Inputs

itemId

string

Default	`'daff-accordion-item' + '-' + ++daffAccordionItemId`
Description	The unique id of an accordion item. Defaults to an autogenerated value.

contentId

string

Default	`'daff-accordion-item-content' + '-' + ++daffAccordionItemContentId`
Description	The unique id of an accordion item content. Defaults to an autogenerated value.

initiallyExpanded

boolean

Default	`false`
Description	Whether or not the item is initially opened by default.

disabled

boolean

Default	`false`
Description	Disables an accordion item and prevents it from being expanded or collapsed.

Directives

DaffAccordionItemTitleDirective

import { DaffAccordionItemTitleDirective } from '@daffodil/design/accordion'

Used to provide a high level overview of the content. It should be wrapped by a <daff-accordion-item>.

@Directive()
class DaffAccordionItemTitleDirective {}

Modules

DaffAccordionModule

Deprecated

import { DaffAccordionModule } from '@daffodil/design/accordion'

@NgModule()
class DaffAccordionModule {}