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
    <template #title>Header 2</template>
      Panel 2

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 role="header">
      <button id="aash-id-6-control" tabindex="0"
        aria-controls="aash-id-6-panel" aria-expanded="true">
        <span>Header 1</span>
    <div id="aash-id-6-panel" role="region" class=""
      <div> Panel 1 </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 id="aash-id-7-panel" role="region" class=""
      aria-labelledby="aash-id-7-control" hidden="">
      <div> Panel 2 </div>

# new AashAccordionComponent(props)

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