UMD Web Components Library
    Preparing search index...

    Variable AccordionItemConst

    AccordionItem: ComponentRegistration = ...

    Accordion Item

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

    <umd-element-accordion-item>

    • headline - The clickable header (required, accepts: span, p)
    • text - The expandable content (required, accepts: div, p)
    • body - Deprecated: Use text slot instead
    • 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
    • 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

    Both events bubble and are composed: true (they cross the Shadow DOM boundary), and fire on the host element for every toggle — whether triggered by a header click or a programmatic data-visual-open change. They do not fire for the initial open state set on load.

    • accordion:open — fired when the item opens
    • accordion:close — fired when the item closes

    accordion:open - When the accordion item opens (header click or data-visual-open="true")

    accordion:close - When the accordion item closes (header click or data-visual-open="false")

    // Listening for open/close events
    const accordion = document.querySelector('umd-element-accordion-item');
    accordion.addEventListener('accordion:open', () => console.log('opened'));
    accordion.addEventListener('accordion:close', () => console.log('closed'));

    <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>

    <!-- 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>

    // 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

    1.0.0

    Settings

    Member Visibility

    On This Page

    Custom ElementSlotsAttributesObserved AttributesDispatched Events