Collapse

Organize long explanations into collapsible topics so users can find what they need.

<sy-collapse>Installation guide Basic usage

Live preview

Interact with the component to see results here.

One open panelOmit bordersTransparent backgroundDisabled

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

Usage guide

Use for content opened when needed, such as FAQs or supplementary settings.

Compare multiple sections

Use the default mode to keep several panels expanded together.

Focus on one section

Use accordion to expand one panel at a time.

Panel structure: Place sy-collapse-panel inside sy-collapse and put the title in the header slot. Set the initial state with active, arrow visibility with arrow, and interaction availability with disabled. openPanel() and closePanel() use zero-based indices.

Examples

Independent panels

Multiple panels can be expanded at once.

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

Accordion

Opening a new panel closes the previous one.

View code

HTML

<sy-collapse accordion id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

Background and borders

A style that blends into surrounding content.

View code

HTML

<sy-collapse
  ghost
  borderless
  id="sample"
>
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

Disabled panel

Prevent interaction with individual panels.

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel
    active
    arrow
    disabled
  ><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow disabled><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow disabled><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

Direct control

Open or close all panels or a specific panel.

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Expand all</sy-button>
  <sy-button id="action-1" size="small">Collapse all</sy-button>
  <sy-button id="action-2" size="small">Expand second panel</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.openAll();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#sample");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.closeAll();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#sample");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.openPanel(1);
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Events and payloads

Interact with the component and inspect the latest event name and detail. The code includes subscriptions to events emitted by this component and its children.

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>
<output id="demo-events" aria-live="polite">Interact with the component to see
  its latest event and payload.</output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  for (const name of ["changed"]) {
    document.addEventListener(name, event => {
      document.querySelector('#demo-events').textContent =
        `${event.target.localName} · ${name}: ${describeResult(event.detail)}`;
    });
  }
</script>

Control individual panels

Call open, close, or toggle on a specific sy-collapse-panel instead of the entire group.

View code

HTML

<sy-collapse id="sample">
  <sy-collapse-panel
    active
    arrow
    id="supplement-1"
  ><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Expand first panel</sy-button>
  <sy-button id="action-1" size="small">Collapse first panel</sy-button>
  <sy-button id="action-2" size="small">Toggle first panel</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {});
  const actionTarget0 = document.querySelector("#supplement-1");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.open();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget1 = document.querySelector("#supplement-1");
  document.querySelector('#action-1').addEventListener('click', async () => {
    const result = await actionTarget1.close();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
  const actionTarget2 = document.querySelector("#supplement-1");
  document.querySelector('#action-2').addEventListener('click', async () => {
    const result = await actionTarget2.toggle();
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Borderless panels

Remove panel borders while retaining the standard panel background.

View code

HTML

<sy-collapse borderless id="sample">
  <sy-collapse-panel active arrow><span slot="header">Installation steps</span>
    <p>Install the package, then register the components you need.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Change theme</span>
    <p>Apply the theme class to a shared container.</p>
  </sy-collapse-panel>
  <sy-collapse-panel arrow><span slot="header">Updates</span>
    <p>Review the release notes and update the version.</p>
  </sy-collapse-panel>
</sy-collapse>

<script type="module">
  const component1 = document.querySelector("#sample");
  Object.assign(component1, {
    "borderless": true,
    "ghost": false
  });
</script>

Feature examples

Choose a feature from 8 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.