Accordion component

Introducing an accordion component designed with both customization and accessibility in mind. This component seamlessly integrates with your Vue projects, offering expandable and collapsible content panels. With built-in support for ARIA attributes, it ensures a user-friendly experience for all, including those using assistive technologies. Customize its appearance and behavior to fit your site's design aesthetics and functional requirements. Empower your web application with an accordion that's both visually engaging and inclusively designed.

API Reference

Props

| Name | Type | Description | |:------------------|:----------|:----------------------------------------------| | data-id-prefix | string | required Prefix for all the id attributes | | data-header-tag | string | HTML tag for headers. Default "h3" | | data-auto-close | boolean | Keep open only one section at time |

Slots

| Name | Description | |:-------------------|:---------------------------------------------------------------------------------------------------------------------------------------------------------| | header-${index} | Required. Slot for headers. Replace ${index} with an incremental number, starting at 1. Scoped slot with extended boolean parameter. | | content-${index} | Required. Slot for contents. Replace ${index} with an incremental number, starting at 1. The associated header and content must have the same index. |

CSS custom properties

| Name | Default | Description | |:--------------------------------------|:--------|:------------------------------------------| | --accordion-cmp-transition-duration | 0.5s | Accordion open animation time. | | --accordion-cmp-transition-easing | ease | Accordion open animation timing function. |

Usage/Examples

<accordion-cmp
  data-id-prefix="AccordionCmp-1"
  :data-auto-close="true"
  data-header-tag="h2"
>
  <template #header-1="{ expanded }">
    <span :class="['header', { expanded }]">Header 1</span>
  </template>
  <template #content-1>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat
        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </template>
  <template #header-2="{ expanded }">
    <span :class="['header', { expanded }]">Header 2</span>
  </template>
  <template #content-2>
    <div class="content">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
        enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat
        nulla pariatur. Excepteur sint occaecat cupidatat non proident,
        sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </template>
</accordion-cmp>