1. Docs
  2. Accordion

Accordion Component

Display togglable accordion panels.

UnoCSS PresetTailwind Plugin

Installation

To get started, install the Accordion package. If you have already installed the complete @flexilla/flexilla package, you can skip this step.

Structure

Accordion Structure

  • accordion: A <div> element (you can use any other tag that is a valid HTMLElement).
  • Accordion Item: Add the data-accordion-item attribute to the container for each item (recommended to use a div element).
    • data-accordion-value: A required unique value for each item.
    • Trigger: Add the data-accordion-trigger attribute to the element used as a trigger (recommended to use a button element).
    • Content: Add the data-accordion-content attribute to the collapsible container (recommended to use a div element).

Consuming the Component

To use the component, import it and initialize it with the desired options. 
import { Accordion } from '@flexilla/accordion';
const accordion = new Accordion(
  "#accordion-example",
  {
    // options here
  }
)

States

Flexilla uses data-attribute to manage the state of each accordion item. Whenever an action is triggered, the targeted element will update its data-attribute.

Data State: data-state

The data-state attribute stores the state of each item and is applied to both the item and the collapsible element. This can be used to target the item’s state via CSS.
  • open: Indicates that the content is fully expanded.
  • close: Indicates that the content height is set to 0.

Aria Expanded: aria-expanded

The aria-expanded attribute is applied to the trigger element. The value can be either true or false.

Example

Use aria-expanded and data-state to visually indicate the active accordion and animate arrows or other indicators.

Accordion Modes

  • "single": Only one item will be open at a time. When another item is clicked, the previous one closes.
  • "multiple": Allows multiple items to remain open simultaneously.
You can use the data-type attribute or the options.accordionType property to define this behavior.

Using the data-type Attribute 

<div id="accordion-example" data-accordion-type="single">
  <!-- items -->
</div>

Using the accordionType Property 

const accordion = new Accordion("#accordion-example", {
  accordionType: "multiple" // default is "single"
});

Props

Parameters

accordion
HTMLElement|string
Accordion container, which can be a valid selector or HTMLElement.
options
AccordionOptions
An options object to configure the accordion behavior.
With JavaScript 
const accordion = new Accordion("#accordion-example", {
  // options here
});
With TypeScript 
import type { AccordionOptions } from "@flexilla/accordion";

const options: AccordionOptions = {
  // options
};

new Accordion("#accordion-example", options);

Options

Options can also be passed via data-* attributes. View examples here to learn how. 
const options = {
  accordionType: "multiple", // default is "single"
  defaultValue: "item-3",
  allowTriggerOnFocus: false, // default is false
  preventClosingAll: true, // default is false
  onChangeItem: ({ expandedItem }) => {
    // handle expanded item
  }
};
defaultValue data-default-value
string
Specifies the default active item. Can also be set via the data-default-value attribute on the accordion element.
accordionType data-accordion-type
single | multiple
Defines the accordion mode. The default is single.
preventClosingAll data-prevent-closing-all
boolean | undefined
Prevents all items from being closed. If true, at least one item must remain open. The default is false.
onChangeItem
method
A callback function that receives the last triggered item, including its trigger, content, and state.

Methods

Show Item

To show a specific item in the accordion, use the showItem method. 
import { Accordion } from "@flexilla/accordion";

const myAccordion = new Accordion("[data-accordion-example]");

myAccordion.showItem("value-of-the-concerned-item");

Hide Item

To hide a specific item, use the hideItem method. 
myAccordion.hideItem("value-of-the-concerned-item");

Initialization

The init method is a static method that works the same as calling new Accordion(selector, options). 
import { Accordion } from "@flexilla/accordion";
Accordion.init(".my-accordion", { /* options */ });

Auto Initialization

The autoInit method initializes all accordion elements. By default, it selects elements using the [data-fx-accordion] selector. 
import { Accordion } from "@flexilla/accordion";

Accordion.autoInit(); // Initializes elements with the selector `data-fx-accordion`

// You can also specify a different selector
Accordion.autoInit(".accordion-item");

Accessibility

The Accordion component is fully accessible. You can navigate between items using the Arrow Keys.