The @m3e/web/expansion-panel module provides components for organizing content in collapsible sections and coordinated groups. It includes the following components:

• m3e-expansion-panel — A details-summary view for organizing content in collapsible sections.
• m3e-accordion — Organizes multiple expansion panels into a coordinated group.

import "@m3e/web/expansion-panel";

This section outlines usage examples and configuration guidance for the components in this package.

You can use a standalone m3e-expansion-panel to present a collapsible details-summary section. Use the header slot to specify the title of a panel and use the default slot for its content.

<m3e-expansion-panel>
  <span slot="header">Panel header</span>
  Panel contents
</m3e-expansion-panel>

Use the open attribute to control whether a panel is open (expanded).

<m3e-expansion-panel open>
  <span slot="header">Panel header</span>
  Panel contents
</m3e-expansion-panel>

You can change the toggle position and direction using the toggle-position and toggle-direction attributes. Supported positions include: before and after (default). Supported directions include vertical (default) and horizontal.

<m3e-expansion-panel toggle-position="before" toggle-direction="horizontal">
  <span slot="header">Panel header</span>
  Panel contents
</m3e-expansion-panel>

Use the hide-toggle attribute to hide the toggle.

<m3e-expansion-panel hide-toggle>
  <span slot="header">Panel header</span>
  Panel contents
</m3e-expansion-panel>

Use a m3e-accordion to create a coordinated group of panels.

<m3e-accordion>
  <m3e-expansion-panel open>
    <span slot="header">Panel 1</span>
    I am content for the first panel
  </m3e-expansion-panel>
  <!-- Additional panels omitted for brevity -->
</m3e-accordion>

By default, only one panel can be open at a time. Use the multi attribute to allow multiple panels to be open at the same time.

<m3e-accordion multi>
  <m3e-expansion-panel open>
    <span slot="header">Panel 1</span>
    I am content for the first panel
  </m3e-expansion-panel>
  <!-- Additional panels omitted for brevity -->
</m3e-accordion>

Expansion panels imitate the experience of the native detail and summary elements. Internally, a panel's header is given ARIA role="button" and the aria-controls attribute with the panel's internal content wrapper's ID. Additionally, the internal header's aria-expanded attribute reflects the expanded state of the panel.

Because expansion panel headers are buttons, avoid adding interactive controls in the header slot, including buttons and anchors.

The @m3e/web package uses JavaScript Modules. To use it directly in a browser without a bundler, use a module script similar to the following.

<script type="module" src="/node_modules/@m3e/web/dist/expansion-panel.js"></script>

In addition, you must use an import map to include dependencies.

<script type="importmap">
  {
    "imports": {
      "tslib": "https://cdn.jsdelivr.net/npm/tslib@2.8.1/+esm",
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "lit/": "https://cdn.jsdelivr.net/npm/lit@3.3.0/",
      "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/+esm",
      "lit-html/directive.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directive.js",
      "lit-html/directives/if-defined.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/if-defined.js",
      "lit-html/directives/class-map.js": "https://cdn.jsdelivr.net/npm/lit-html@3.3.0/directives/class-map.js",
      "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/+esm",
      "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@2.0.4/",
      "@m3e/web/core": "/node_modules/@m3e/web/dist/core.js",
      "@m3e/web/core/bidi": "/node_modules/@m3e/web/dist/core-bidi.js"
    }
  }
</script>

For production builds, use the minified files to ensure optimal load performance.

The @m3e/web package includes a Custom Elements Manifest (custom-elements.json), which documents the properties, attributes, slots, events and CSS custom properties of each component.

You can explore the API below, or integrate the manifest into your own tooling.