Documentation

Class

AashAccordionComponent

AashAccordion~AashAccordionComponent(props)

Generates an accordion.

Sections are added using aash-accordion-section.

Example source:

<aash-accordion :always-expanded="true">
  <aash-accordion-section :title="'Header 1'">
    Panel 1
  </aash-accordion-section>
  <aash-accordion-section>
    <template #title>Header 2</template>
      Panel 2
  </aash-accordion-section>
</aash-accordion>

The resulting DOM follows the example shown in the WAI-ARIA Authoring Practices 1.1. Notable differences are a div surrounding the pairs of headers and panels and an additional div between the panel and its content.

The former simplifies styling of a section independant of its expanded state with e.g. a shadow.

The latter is required for animating accordions. Details can be found in the documentation od AashAccordionSection.

<div data-aash-role="accordion">
  <div>
    <div role="header">
      <button id="aash-id-6-control" tabindex="0"
        aria-controls="aash-id-6-panel" aria-expanded="true">
        <span>Header 1</span>
      </button>
    </div>
    <div id="aash-id-6-panel" role="region" class=""
      aria-labelledby="aash-id-6-control">
      <div> Panel 1 </div>
    </div>
  </div>
  <div>
    <div role="header">
      <button id="aash-id-7-control" tabindex="0"
        aria-controls="aash-id-7-panel" aria-expanded="false">Header 2</button>
    </div>
    <div id="aash-id-7-panel" role="region" class=""
      aria-labelledby="aash-id-7-control" hidden="">
      <div> Panel 2 </div>
    </div>
  </div>
</div>
Constructor

# new AashAccordionComponent(props)

Parameters:
Name Type Description
props Object

the properties
alwaysExpanded Boolean

make sure that at least, one panel is always expanded, defaults to false
singleExpansion Boolean

whether only one section may be expanded at a given point in time, defaults to true
headerType string

the element type for the headers, defaults to "div"
buttonType string

the element type for the buttons, defaults to "button"
panelType string

the element type for the panels, defaults to "div"
panelClass string

the class attribute for the panels, defaults to null

View Source components/accordion/AashAccordion.ts, line 77