Accordion

import Accordion from '@bbc/front-end-kit/js/components/Accordion';

A component that wraps a trigger button and a content panel and uses an internal Tab instance with GSAP height-tween animations to expand and collapse content. Toggles a --active class on the root element when open.

It extends Component.

Getting started

DOM structure

<div class="accordion">
    <button class="accordion__trigger">Toggle</button>
    <div class="accordion__content">
        <!-- content here -->
    </div>
</div>

JavaScript

import Accordion from '@bbc/front-end-kit/js/components/Accordion';

const accordion = new Accordion({
    $el: document.querySelector('.accordion')
});

How it works

The constructor looks up .accordion__trigger and .accordion__content inside $el and passes them to an internal Tab instance. The Tab handles trigger wiring and toggle state — Accordion only overrides the show/hide animations with GSAP height tweens (from 0 to scrollHeight and back).

The --active class is toggled on $el by listening to the internal tab's before-show and before-hide events.

API

constructor(args = {})

Initialises the Accordion instance.

Parameters

• args: Configuration object passed through to Component.
  • $el (Element): The root accordion element. Must contain .accordion__trigger and .accordion__content children.

Methods

All show/hide/toggle control is delegated to the internal Tab instance. Access it via the private _tab property if direct control is needed.

Events

Events are dispatched by the internal Tab instance. Listen on accordion._tab:

CSS classes

External dependencies

• GSAP: Used for height tweening (0 → scrollHeight on open, reverse on close). Duration is 0.25s with Power3.ease.