The @m3e/expansion-panel package 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.

npm i @m3e/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.

This 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/expansion-panel/dist/index.js"></script>

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

<script type="importmap">
  {
    "imports": {
      "lit": "https://cdn.jsdelivr.net/npm/lit@3.3.0/+esm",
      "@m3e/core": "/node_modules/@m3e/core/dist/index.js"
    }
  }
</script>

For production, use index.min.js for faster load times.

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