We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Accordion Component for Vue

The accordion control is a vertically collapsible content panel that displays one or more panels at a time within the available space.


Rendering

Item-based rendering

An accordion can be rendered based on a JSON array collection of properties such as header and content. Data binding can be achieved by forming a array collection of items.

Template rendering

An accordion can also be rendered with the given HTML elements. HTML markup can be formed based on templating elements using the template engine.


Expand or Collapse

Expand mode

A single panel or multiple panels can be expanded/collapsed at a time by clicking anywhere on the header.

Collapsible

All the panels can be collapsed. With customization, a specific panel can always be open while the rest of panels are in a collapsed/expanded state.


Nested Accordion

Allows you to add nested levels of panel within the parent accordion.


Icons support

Prefix icons/images can be added to the panel header, and the default expand/collapse icon used in header can be customized.


Responsive

Accordion adapts responsively in devices based on the available space.

JavaScript Accordion Control with responsive mode in mobile devices.


Load content with AJAX

Accordion allows you to load external content to the panel using AJAX library to help load large amounts of content efficiently.


Animation

Supports different types of built-in animation for expanding/collapsing the panel. Animation behavior can also be customized.

JavaScript Accordion Control with built-in animation on expand/collapse pane.


State persistence

During browser navigation, the expand and collapsed state of the accordion persists.


Accessibility

  • Fully supports WAI-ARIA accessibility that helps the accordion control be accessible by on-screen readers and assistive devices. 
  • Follows WAI-ARIA Best Practices for implementing keyboard interaction. 
  • Designed the UI element visuals such as foreground color, background color, line spacing, text and images based on WCG 2.0 standard.

Developer-friendly API

Developers can control the appearance and behavior of the accordion using a rich set of APIs.


45+ VUE COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.