To source

a-expandable

A collapsible element with smooth expand/collapse animations for accordions and disclosure widgets.

The a-expandable element creates collapsible content sections with smooth CSS Grid-based animations. It handles accessibility automatically, including ARIA attributes, keyboard navigation, and anchor link support.

However, monkeys have begun to rent octopus over the past few months, specifically for cats associated with their pigs. However, horses have begun to rent lions over the past few months, specifically for plums associated with their dogs. However, eagles have begun to rent pomegranates over the past few months, specifically for bananas associated with their cats! However, pandas have begun to rent grapefruits over the past few months, specifically for kittens associated with their snails.

Used by Accordion, Combobox, Filter, and Select.

Installation

import "@sv/elements/expandable";

Usage

Basic Usage

<a-expandable>
  <button slot="toggle" type="button">
    Click to expand
  </button>
  <div>
    Hidden content that will be revealed
  </div>
</a-expandable>

Hidden content that will be revealed

Initially Opened

<a-expandable opened>
  <button slot="toggle" type="button">
    This starts open
  </button>
  <div>
    Visible content
  </div>
</a-expandable>

Visible content

Expand up

However, strawberries have begun to rent hamsters over the past few months, specifically for plums associated with their squirrels. This is not to discredit the idea that however, hamsters have begun to rent chimpanzees over the past few months, specifically for bananas associated with their elephants. Nowhere is it disputed that however, dogs have begun to rent cheetahs over the past few months, specifically for currants associated with their oranges. However, turtles have begun to rent birds over the past few months, specifically for lions associated with their monkeys.

Expand a Paragraph

However, frogs have begun to rent grapes over the past few months, specifically for limes associated with their blackberries? This is not to discredit the idea that however, owls have begun to rent giraffes over the past few months, specifically for chimpanzees associated with their prunes. However, strawberries have begun to rent horses over the past few months, specifically for plums associated with their cows. However, cherries have begun to rent watermelons over the past few months, specifically for cheetahs associated with their bananas!

Shouting with happiness, however, kumquats have begun to rent grapes over the past few months, specifically for figs associated with their hippopotamus. Unfortunately, that is wrong; on the contrary, however, lobsters have begun to rent cheetahs over the past few months, specifically for persimmons associated with their pears? To be more specific, however, camels have begun to rent figs over the past few months, specifically for chickens associated with their monkeys. However, melons have begun to rent chimpanzees over the past few months, specifically for raspberries associated with their frogs.

Programmatic Control

const expandable = document.querySelector('a-expandable');

// Open the expandable
expandable.open();

// Close the expandable
expandable.close();

// Toggle the state
expandable.toggle();

// Check current state
if (expandable.opened) {
  console.log('Currently expanded');
}

Listening for Changes

const expandable = document.querySelector('a-expandable');

expandable.addEventListener('change', (event) => {
  console.log('Expanded:', event.target.opened);
});

Styling

The expandable uses CSS Grid for smooth height animations. Customise timing with CSS custom properties:

a-expandable {
  --transition-speed: 0.33s;
  --animation-easing: ease;
}

/* Faster animation */
a-expandable.fast {
  --transition-speed: 0.15s;
}

/* Slower, more dramatic */
a-expandable.slow {
  --transition-speed: 0.5s;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

Styling the Toggle

a-expandable [slot="toggle"] {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Rotate icon when opened */
a-expandable[opened] [slot="toggle"] .icon {
  transform: rotate(180deg);
}

Accessibility

  • ARIA Attributes: Automatically sets aria-expanded on the toggle and aria-labelledby on the content region.
  • Keyboard Support: Toggle responds to Enter and Space keys when focused.
  • Focus Management: Focusable elements inside collapsed content are removed from tab order.
  • Anchor Links: When a URL hash matches an element inside the expandable, it automatically opens to reveal the content.
  • Scroll Into View: When opened or closed, the expandable scrolls into view to prevent content from shifting off-screen.
  • Hidden Until Found: Uses hidden="until-found" for browser find-in-page support (where available).

CSS Custom Properties

PropertyDefaultDescription
--transition-speed0.33sDuration of the expand/collapse animation
--animation-easingeaseEasing function for the animation

Expandable

A element that can collapse and expand its content with an animation.

Example

<a-expandable opened class="accordion">
   <button slot="toggle" type="button">
     <div class="headline">Title</div>
   </button>

   <div>Content</div>
 </a-expandable>

Attributes

Name Type Default value Description
direction "down" | "up" "down"

What direction to open
opened boolean false

Wether the eleemnt is open or not

Events

Name Description
change

Emitted when the element open state changes

Methods

Expandable.close()

src/Expandable.ts:88

Expandable.open()

src/Expandable.ts:93

Expandable.toggle()

src/Expandable.ts:98

References