@pixeto/accordion NPM

Accordion

The Accordion class provides a simple and customizable way to create accordion-style UI components using TypeScript and GSAP for animations.

Features

Expand and collapse accordion items with smooth animations.
Supports multiple accordion lists on the same page.
Fully customizable via HTML attributes and JavaScript options.

Installation

Clone the repository or download the source code.
Install dependencies:
```
npm install
```
Build the project (if needed):
```
npm run build
```

Usage

HTML Structure

Ensure your HTML contains the following structure for the accordion:

<div data-accordion="list">
  <div data-accordion="item">
    <div data-accordion="header">Header 1</div>
    <div data-accordion="body">Content 1</div>
  </div>
  <div data-accordion="item">
    <div data-accordion="header">Header 2</div>
    <div data-accordion="body">Content 2</div>
  </div>
</div>

JavaScript Initialization

Import and initialize the Accordion class in your JavaScript/TypeScript file:

import Accordion from '@pixeto/Accordion'

new Accordion()

Methods

The Accordion class provides the following methods:

create(): Initializes the accordion items.
setProperties(): Sets the default properties for the accordion.
handleClick(index: number): Handles click events for accordion headers.
accordionOpen(body: HTMLElement, index: number): Opens a specific accordion item.
accordionClose(body: HTMLElement, index: number): Closes a specific accordion item.
resetAccordion(): Resets all accordion items to their closed state.
addEventListeners(): Placeholder for adding custom event listeners.