syidaxdesign system
Home Pricing Settings
ComponentsData display

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

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-collapse>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseExpand only one panel at a time.
booleanfalseHide the default border.
booleanfalseBlock user interaction and keyboard focus.
booleanfalseUse a layout that fills the available height.
booleanfalseMinimize background and border styling.

Methods

MethodReturnsDescription
Promise<void>Expand all panels. In accordion mode, keep only one panel open.
Promise<void>Collapse all panels.
Promise<void>Expand the panel at the specified index.
Promise<void>Collapse the panel at the specified index.

Slots

SlotDescription
Component body or child items.

<sy-collapse-panel>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseExpand the panel body.
booleanfalseShow the expansion arrow.
booleanfalseBlock user interaction and keyboard focus.
booleanfalseMinimize background and border styling.
booleanfalseFill the available height.

Events

EventDetailDescription
CustomEvent<CollapsePanelChangeDetail>Emitted when the value or selection state changes.

Methods

MethodReturnsDescription
Promise<void>Toggle the current expansion state.
Promise<void>Open the file chooser. Call within a user click handler.
Promise<void>Close the open panel.

Slots

SlotDescription
Content displayed in the header area.
Component body or child items.
Design SystemTab Navigate Enter Open