Behaviour Accordion Demo

Basic Usage

Click headers to expand/collapse sections. Only one open at a time.

Content for the first section. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Content for the second section. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Content for the third section. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Click an item...

<behaviour-accordion>
  <accordion-item header="Section 1">
    <p>Content for the first section. Lorem ipsum dolor sit amet,
    consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.</p>
  </accordion-item>
  <accordion-item header="Section 2">
    <p>Content for the second section. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
  </accordion-item>
  <accordion-item header="Section 3">
    <p>Content for the third section. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore.</p>
  </accordion-item>
</behaviour-accordion>

Multiple Open

Allow multiple sections to be open simultaneously.

Lit is a simple library for building fast, lightweight web components.

Web components are native browser features that allow you to create reusable custom elements.

Yes! This accordion supports keyboard navigation and ARIA attributes.

<behaviour-accordion multiple>
  <accordion-item header="FAQ: What is Lit?">
    <p>Lit is a simple library for building fast, lightweight web components.</p>
  </accordion-item>
  <accordion-item header="FAQ: Why Web Components?">
    <p>Web components are native browser features that allow you to create
    reusable custom elements.</p>
  </accordion-item>
  <accordion-item header="FAQ: Is it accessible?">
    <p>Yes! This accordion supports keyboard navigation and ARIA attributes.</p>
  </accordion-item>
</behaviour-accordion>

Initially Expanded

Pre-expand specific items on load.

This section starts expanded.

This section starts collapsed.

This section also starts expanded.

<behaviour-accordion expanded="0,2">
  <accordion-item header="Expanded by default">
    <p>This section starts expanded.</p>
  </accordion-item>
  <accordion-item header="Collapsed by default">
    <p>This section starts collapsed.</p>
  </accordion-item>
  <accordion-item header="Also expanded">
    <p>This section also starts expanded.</p>
  </accordion-item>
</behaviour-accordion>

Custom Header Slot

Use the header slot for rich content.

🎨 Design System

Custom header with icon and styled text.

⚙️ Configuration

Another custom header example.

<behaviour-accordion>
  <accordion-item>
    <span slot="header" style="display: flex; align-items: center; gap: 0.5rem;">
      <span style="font-size: 1.5rem;">🎨</span>
      <strong>Design System</strong>
    </span>
    <p>Custom header with icon and styled text.</p>
  </accordion-item>
  <accordion-item>
    <span slot="header" style="display: flex; align-items: center; gap: 0.5rem;">
      <span style="font-size: 1.5rem;">⚙️</span>
      <strong>Configuration</strong>
    </span>
    <p>Another custom header example.</p>
  </accordion-item>
</behaviour-accordion>

Disabled Item

Disable specific accordion items.

This item can be expanded.

This content cannot be accessed.

This item works normally.

<behaviour-accordion>
  <accordion-item header="Enabled Item">
    <p>This item can be expanded.</p>
  </accordion-item>
  <accordion-item header="Disabled Item" disabled>
    <p>This content cannot be accessed.</p>
  </accordion-item>
  <accordion-item header="Another Enabled">
    <p>This item works normally.</p>
  </accordion-item>
</behaviour-accordion>

Programmatic Control

Control the accordion with JavaScript methods.

Content 0

Content 1

Content 2

<behaviour-accordion id="programmatic" multiple>
  <accordion-item header="Item 0">Content 0</accordion-item>
  <accordion-item header="Item 1">Content 1</accordion-item>
  <accordion-item header="Item 2">Content 2</accordion-item>
</behaviour-accordion>

<script>
  const accordion = document.getElementById('programmatic');
  accordion.expand(1);     // Expand Item 1
  accordion.collapse(1);   // Collapse Item 1
  accordion.expandAll();   // Expand all items
  accordion.collapseAll(); // Collapse all items
</script>

Custom Styling

Theme with CSS custom properties.

Custom styled accordion with purple theme.

Using CSS custom properties for theming.

<behaviour-accordion style="
  --accordion-border: #8b5cf6;
  --accordion-header-bg: #f3e8ff;
  --accordion-header-hover: #ede9fe;
  --accordion-header-text: #5b21b6;
  --accordion-icon: #8b5cf6;
  --accordion-focus: #8b5cf6;
  --accordion-radius: 12px;
">
  <accordion-item header="Purple Theme">
    <p>Custom styled accordion with purple theme.</p>
  </accordion-item>
  <accordion-item header="CSS Variables">
    <p>Using CSS custom properties for theming.</p>
  </accordion-item>
</behaviour-accordion>