Accessible Animated Vanilla JS Accordion Library – rt-accordion

rt-accordion is a vanilla JavaScript library that creates accessible, animated accordion components through an attribute-driven approach.

It auto-initializes on page load, applies ARIA roles, and exposes a global programmatic API. Works in any modern browser.

Features:

• Attribute-Driven Configuration: All behavior is controlled through HTML attributes (rt-accordion-* or data-rt-accordion-*).
• Auto-Initialization: The script scans the DOM on load and self-activates on any element carrying the rt-accordion attribute.
• Accessible by Default: Automatically assigns aria-expanded, aria-controls, aria-hidden, role="button", and tabindex="0" to all relevant elements during initialization.
• Keyboard Navigation: Supports Enter, Space, ArrowUp, ArrowDown, Home, and End key interactions.
• Single and Multiple Modes: Switch between allowing one panel open at a time (single) or many (multiple) via a single attribute.
• Physics-Based Animation Speed: Open/close duration scales proportionally with the pixel distance traveled, clamped between 600ms and 2400ms.
• ResizeObserver: Accordion heights recalculate automatically when inner content dimensions change.
• Multiple Independent Instances: Implement several accordions on the same page, each with its own configuration and state.
• Expanded Text Swapping: The rt-accordion-expanded-text attribute lets triggers display different labels when open vs. closed, like “Read More” / “Read Less.”

Use Cases:

• FAQ sections: Let users expand answers while keeping the page tidy.
• Documentation sidebars: Nested navigation that reveals sub‑pages without reloading.
• Product descriptions: Show “Read more” toggles with custom expanded‑text labels.
• Settings panels: Group related options in collapsible cards, with multiple panels open simultaneously.
• Mobile menus: Convert a multi‑level menu into an accordion on small screens.

How To Use It:

1. Download the package and load the main script ‘index.js’ before your closing </body> tag:

<script src="/dist/index.min.js"></script>

2. Create your accordions using HTML attributes. The library supports both standard rt-accordion-* attributes and strict HTML5 data-rt-accordion-* attributes.

<!-- The root wrapper enables the accordion behavior -->
<div rt-accordion rt-accordion-mode="single" rt-accordion-default-open="first">
  <!-- Individual accordion item -->
  <div rt-accordion-item>
    <!-- The clickable trigger button -->
    <button rt-accordion-trigger>
      View Basic Plan Details <span rt-accordion-expanded-text="Hide Details"></span>
    </button>
    <!-- The collapsible content area -->
    <div rt-accordion-content>
      <p>Our basic plan costs $10 per month. It includes 5GB of storage.</p>
    </div>
  </div>
  <!-- Second accordion item -->
  <div rt-accordion-item>
    <button rt-accordion-trigger>
      View Pro Plan Details <span rt-accordion-expanded-text="Hide Details"></span>
    </button>
    <div rt-accordion-content>
      <p>Our pro plan costs $25 per month. It includes unlimited storage.</p>
    </div>
  </div>
</div>

3. Available root wrapper attributes. These go on the outermost rt-accordion element.

• rt-accordion: Activates accordion behavior on the wrapper element.
• rt-accordion-id (string): An optional custom identifier for the instance. Auto-generated if omitted.
• rt-accordion-mode (string): Controls how many panels can be open simultaneously. Values: single (default) or multiple.
• rt-accordion-default-open (string): Sets the initial open state. Values: first (default), all, or none.
• rt-accordion-options-json (JSON string): Reserved for advanced configuration passed as a JSON object string. Intended for future extensibility.

<!-- Open all panels at load. Allow multiple panels open simultaneously. -->
<div rt-accordion rt-accordion-mode="multiple" rt-accordion-default-open="all">
  ...
</div>

4. Available per-item attributes. These go inside the accordion, on individual items or their children.

• rt-accordion-item: Marks a wrapper div as a single accordion row.
• rt-accordion-trigger: Marks the clickable element (usually a <button>) that toggles the row.
• rt-accordion-content: Marks the collapsible panel.
• rt-accordion-open: Forces this specific item to be open on initialization, overriding the default open setting.
• rt-accordion-expanded-text (string): Place this on a <span> inside the trigger. The text swaps to this value when the item is open and reverts to the element’s original text content when closed.

<div rt-accordion rt-accordion-mode="single" rt-accordion-default-open="none">
  <!-- This item forces itself open regardless of default-open="none" -->
  <div rt-accordion-item rt-accordion-open>
    <button rt-accordion-trigger>
      Show Details
      <!-- Swap to "Hide Details" when expanded -->
      <span rt-accordion-expanded-text="Hide Details"></span>
    </button>
    <div rt-accordion-content>
      <p>This panel was forced open by the rt-accordion-open attribute.</p>
    </div>
  </div>
  <div rt-accordion-item>
    <button rt-accordion-trigger>Feature Breakdown</button>
    <div rt-accordion-content>
      <p>Details about the feature set go here.</p>
    </div>
  </div>
</div>

5. Global JavaScript API. After the script loads, all instances are available under window.rtAccordion.

// Returns an array of all registered accordion instance IDs
// Useful for iterating over all instances dynamically
const allIds = window.rtAccordion.ids();
console.log(allIds); // e.g., ["accordion-1", "accordion-2", "pricing-faq"]

// Returns the specific Accordion instance object for a given ID
// Use this to inspect an instance's config, items, or root element
const instance = window.rtAccordion.get("accordion-1");
console.log(instance.conf.mode); // "single"
console.log(instance.items.length); // number of item elements found

// Forces all instances to recalculate their item heights
// Call this after dynamic DOM changes, lazy-loaded images, or font switches
window.rtAccordion.refresh();

// Destroys a single accordion instance by ID
// Strips all inline styles, ARIA attributes, and event listeners from that instance
window.rtAccordion.destroy("accordion-1");

// Destroys ALL accordion instances on the page
// Call this before full SPA view teardowns to avoid memory leaks
window.rtAccordion.destroy();

6. The library manages height transitions through inline styles. Your CSS only needs to handle the visual presentation of triggers and content panels.

Do not set a fixed height on [rt-accordion-content]. The library writes inline height values during animation. A fixed CSS height will conflict and break the transition.

/* Basic layout for each accordion row */
[rt-accordion-item] {
  border-bottom: 1px solid #e5e7eb;
}

/* Style the trigger button */
[rt-accordion-trigger] {
  width: 100%;
  padding: 1rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The content panel — do NOT set a fixed height here */
/* rt-accordion controls height via inline styles */
[rt-accordion-content] {
  padding: 0 1.25rem 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #374151;
}

/* Visual indicator for expanded state */
[rt-accordion-trigger][aria-expanded="true"] {
  color: #2563eb;
}

The post Accessible Animated Vanilla JS Accordion Library – rt-accordion appeared first on CSS Script.