rt-accordion

rt-accordion is a lightweight JavaScript utility that creates accessible, smooth, and fully responsive accordion components with:

• Zero-config defaults (works out of the box)
• Attribute-driven configuration (supports both rt-accordion-* and data-rt-accordion-*)
• Support for multiple instances
• A clean global API under window.rtAccordion
• Defensive fallbacks to avoid runtime crashes

Zero dependency (100% Vanilla JS)

---

Table of Contents

• 1. Installation
  • 1.1 CDN (jsDelivr)
  • 1.2 npm
• 2. Quick Start
• 3. Activation Rules
• 4. Configuration (HTML Attributes)
• 5. Multiple Instances
• 6. Global API
• 7. Troubleshooting
• 8. License

---

1. Installation

1.1 CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/@rethink-js/rt-accordion@latest/dist/index.min.js"></script>

1.2 npm

npm install @rethink-js/rt-accordion

Then bundle or load dist/index.min.js as appropriate for your build setup.

---

2. Quick Start

Add the script to your page. With no configuration provided, rt-accordion will:

• Auto-initialize itself when applicable
• Apply safe, accessible defaults (ARIA roles, tab-indexing, keyboard navigation)
• Expose the global API

Example HTML structure:

<div rt-accordion>
  <div rt-accordion-item>
    <button rt-accordion-trigger>Toggle Item</button>
    <div rt-accordion-content>
      <p>Your accordion content goes here.</p>
    </div>
  </div>
</div>

Note: If you do not provide any rt-accordion-mode or rt-accordion-default-open attributes, the library runs using its internal defaults (single mode, first item open).

---

3. Activation Rules

The library activates automatically when it detects the rt-accordion (or data-rt-accordion) attribute on a wrapper element in the DOM. If this attribute is not found, the script remains completely dormant to save resources.

---

4. Configuration (HTML Attributes)

Root Activation & Global Options

You can use either standard rt-accordion-* attributes or strict HTML5 data-rt-accordion-* attributes.

<div rt-accordion rt-accordion-mode="multiple" rt-accordion-default-open="all">
  ...
</div>

Core Wrapper Attributes

Attribute	Description
rt-accordion	Enables accordion behavior on the wrapper.
rt-accordion-id	Optional unique identifier (auto-generated if missing).
rt-accordion-mode	Defines toggle behavior. Values: single (default) or multiple.
rt-accordion-default-open	Defines initial state. Values: first (default), all, or none.

---

Per-Instance Configuration (Inside the Accordion)

<div rt-accordion-item rt-accordion-open>
  <button rt-accordion-trigger>
    Read More <span rt-accordion-expanded-text="Read Less"></span>
  </button>
  <div rt-accordion-content>...</div>
</div>

Attribute	Description
rt-accordion-item	Marks the wrapper for an individual accordion row/item.
rt-accordion-trigger	Marks the clickable button that toggles the content.
rt-accordion-content	Marks the collapsible content container.
rt-accordion-open	Forces a specific item to be open on initialization.
rt-accordion-expanded-text	Swaps text inside the trigger when the item is open.

---

Advanced JSON Options

<div rt-accordion rt-accordion-options-json='{"key":"value"}'></div>

Used for advanced configuration that doesn’t warrant individual attributes. (Reserved for future extendability).

---

5. Multiple Instances

rt-accordion supports multiple independent instances on the same page.

Each instance:

• Has its own configuration (e.g., one can be single mode, another multiple).
• Is registered internally.
• Can be controlled individually via the API.

---

6. Global API

Once initialized, you can interact with the accordions programmatically:

window.rtAccordion;

Common Methods

Method	Description
ids()	Returns an array of all active accordion instance IDs.
get(id)	Returns the specific accordion instance object.
refresh()	Forces a recalculation of all active accordion heights (Resize-safe).
destroy(id?)	Removes all inline styles, ARIA tags, and event listeners.

---

7. Troubleshooting

Feature not activating

• Ensure the correct rt-accordion and internal rt-accordion-item/rt-accordion-trigger/rt-accordion-content attributes exist.
• Confirm the script loaded successfully.

Animations are jittery

• Ensure rt-accordion-content elements do not have fixed heights in your CSS.
• The script uses ResizeObserver to smoothly handle inner content changes; ensure your CSS isn't forcing conflicting transitions.

Unexpected behavior

• Check for conflicting scripts.
• Verify attribute spelling (e.g., rt-accordion-trigger, not rt-accordion-btn).
• Confirm instance isolation if nesting accordions.

---

8. License

MIT License

Package: @rethink-js/rt-accordion
GitHub: https://github.com/Rethink-JS/rt-accordion

---

by Rethink JS
https://github.com/Rethink-JS