@frankhoodbs/accordion-cmp v1.2.4

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

Slots

CSS custom properties

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>