@frankhoodbs/accordion-cmp

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>