Variable item

item: ComponentRegistration

Accordion Item

Creates an expandable/collapsible content container with smooth animations and theme variations.

Custom Element

<umd-element-accordion-item>

Slots

headline - The clickable header (required, accepts: span, p)
text - The expandable content (required, accepts: div, p)
body - Deprecated: Use text slot instead

Attributes

data-theme - Color theme options:
- light - Light theme styling
- dark - Dark theme styling
data-visual-open - Initial visual state:
- true - Opens accordion on load
- false - Closes accordion on load

Observed Attributes

data-visual-open - When changed to "true", opens accordion with animation; when changed to "false", closes with animation
resize - When set to "true", re-evaluates accordion height without animation

Example

<umd-element-accordion-item>
  <p slot="headline">Click to expand</p>
  <div slot="text">
    <p>Hidden content revealed when expanded</p>
  </div>
</umd-element-accordion-item>

Example

<!-- Dark theme with default open state -->
<umd-element-accordion-item data-theme="dark" data-visual-open="true">
  <span slot="headline">Click to collapse</span>
  <div slot="text">
    <p>Content revealed as expanded</p>
  </div>
</umd-element-accordion-item>

Example

// Programmatic control
const accordion = document.querySelector('umd-element-accordion-item');
accordion.setAttribute('data-visual-open', 'true'); // Opens with animation
accordion.setAttribute('data-visual-open', 'false'); // Closes with animation

Since

1.0.0

Variable item

Custom Element

Slots

Attributes

Observed Attributes

Example

Example

Example

Since

Settings

On This Page