### Installing Accordion.js via npm

Source: https://github.com/michu2k/accordion/blob/master/README.md

This command installs the `accordion-js` package using npm, the Node.js package manager. It's the recommended way to include the module in a modern JavaScript project, making it available for import.

```shell
npm install accordion-js
```

--------------------------------

### Initializing Accordion Component in JavaScript

Source: https://github.com/michu2k/accordion/blob/master/index.html

This snippet initializes a new Accordion component. It targets HTML elements with the class 'accordion-container' to apply accordion functionality. This is a basic setup for interactive collapsible content.

```JavaScript
new Accordion(".accordion-container");
```

--------------------------------

### Opening Accordion Element by Index (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `open()` method programmatically opens a specific accordion element. It requires an `idx` (index) argument, which is a zero-based integer representing the position of the accordion item to be opened. For example, `acc.open(1)` opens the second item.

```JavaScript
acc.open(1)
```

--------------------------------

### Example HTML Structure for Accordion.js

Source: https://github.com/michu2k/accordion/blob/master/README.md

This HTML markup provides a basic structure for an accordion, using specific classes like `accordion-container`, `ac`, `ac-header`, `ac-trigger`, `ac-panel`, and `ac-text`. This layout is essential for the Accordion module to correctly identify and manage the interactive elements.

```html
<div class="accordion-container">
  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>

  <div class="ac">
    <h2 class="ac-header">
      <button type="button" class="ac-trigger">Lorem ipsum dolor sit amet.</button>
    </h2>
    <div class="ac-panel">
      <p class="ac-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>
```

--------------------------------

### Importing Accordion.js in JavaScript (ES Modules)

Source: https://github.com/michu2k/accordion/blob/master/README.md

These import statements bring the Accordion module and its associated CSS styles into a JavaScript file. This approach is used when the module is installed via npm and the project uses ES module syntax for bundling.

```javascript
import Accordion from "accordion-js";
import "accordion-js/dist/accordion.min.css";
```

--------------------------------

### Defining beforeOpen Callback for Accordion (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `beforeOpen` callback is invoked just prior to an accordion item starting its opening animation. It provides the `currElement` (the accordion item being opened) as an argument, enabling custom logic or side effects before the panel becomes visible.

```JavaScript
beforeOpen: (currElement) => {}
```

--------------------------------

### Toggling Accordion Element by Index (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `toggle()` method programmatically switches the open/closed state of a specific accordion element. It accepts an `idx` (index) argument, a zero-based integer specifying the accordion item to be toggled. For example, `acc.toggle(1)` will open the second item if closed, or close it if open.

```JavaScript
acc.toggle(1)
```

--------------------------------

### Basic Accordion.js Initialization

Source: https://github.com/michu2k/accordion/blob/master/README.md

This script initializes a new Accordion instance by targeting elements with the class `accordion-container`. This is the simplest way to activate the accordion functionality on the defined HTML structure.

```javascript
<script>
  new Accordion(".accordion-container");
</script>
```

--------------------------------

### Advanced Accordion.js Initialization and API Usage

Source: https://github.com/michu2k/accordion/blob/master/README.md

This snippet demonstrates various ways to initialize the Accordion module, including using default options, custom user options (like `duration`, `showMultiple`, `onOpen` callback), and initializing multiple accordions by passing an array of selectors or HTMLElements. It also shows how to detach events from an accordion instance using `detachEvents()`.

```javascript
// Default options
new Accordion(".container-first");

// User options
new Accordion(".container-second", {
  duration: 400,
  showMultiple: true,
  onOpen: function (currentElement) {
    console.log(currentElement);
  }
});

// Define several accordions with the same options (pass an array with selectors)
new Accordion([".container-first", ".container-second"], {});

// or pass an array with HTMLElements
const accordions = Array.from(document.querySelectorAll(".accordion-container"));
new Accordion(accordions, {});

// Detach events
const accordion = new Accordion(".container-first");
accordion.detachEvents();
```

--------------------------------

### Including Accordion.js via CDN in HTML

Source: https://github.com/michu2k/accordion/blob/master/README.md

This HTML snippet demonstrates how to include the Accordion module's CSS and JavaScript files directly into a web page using CDN links. This method is suitable for quick integration without a build process.

```html
<link rel="stylesheet" href="[CDN CSS URL]" />
<script src="[CDN JS URL]"></script>
```

--------------------------------

### Defining onOpen Callback for Accordion (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `onOpen` callback is executed once an accordion item has fully completed its opening animation and is visible. It receives the `currElement` (the opened accordion item) as an argument, useful for post-open operations like logging or UI updates.

```JavaScript
onOpen: (currElement) => {}
```

--------------------------------

### Closing Accordion Element by Index (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `close()` method programmatically closes a specific accordion element. It takes an `idx` (index) argument, a zero-based integer indicating the position of the accordion item to be closed. For instance, `acc.close(1)` closes the second item.

```JavaScript
acc.close(1)
```

--------------------------------

### Defining beforeClose Callback for Accordion (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `beforeClose` callback is triggered just before an accordion item begins its closing animation. It passes the `currElement` (the accordion item being closed) as an argument, allowing for pre-close cleanup or validation logic.

```JavaScript
beforeClose: (currElement) => {}
```

--------------------------------

### Defining onClose Callback for Accordion (JavaScript)

Source: https://github.com/michu2k/accordion/blob/master/README.md

The `onClose` callback is invoked after an accordion item has completely finished its closing animation and is hidden. It provides the `currElement` (the closed accordion item) as an argument, suitable for post-close state management or resource release.

```JavaScript
onClose: (currElement) => {}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.