Collapsible

Basic example

Open by default

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Basic example" open>
  <p>Open by default</p>
</vscode-collapsible>
<vscode-collapsible title="Basic example">
  <p>Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.</p>
</vscode-collapsible>

vscode-collapsible p {
  margin: 10px;
}

Toggle event

A custom event is dispatched when the visibility of content changes.

Test content

<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
  <p>Test content</p>
</vscode-collapsible>

const el = document.querySelector("#toggle-event-example");

el.addEventListener("vsc-collapsible-toggle", (ev) => {
  console.log(ev);
});

Actions

Clickable action icons. Please review the developer console for logged messages. These icons are visible exclusively when the component is in the opened state.

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Actions example" class="collapsible" open>
  <vscode-icon
    name="file-add"
    action-icon
    aria-role="button"
    id="btn-file-add"
    title="New File"
    slot="actions"></vscode-icon>
  <vscode-icon
    name="refresh"
    action-icon
    aria-role="button"
    id="btn-refresh"
    title="Refresh"
    slot="actions"></vscode-icon>
  <p>
    Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
    efficitur augue.
  </p>
</vscode-collapsible>

.collapsible ul {
  display: flex;
  margin: 0;
  padding: 0;
}

.collapsible li {
  align-items: center;
  display: flex;
  height: 22px;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 28px;
}

.collapsible p {
  margin: 10px;
}

document
  .querySelector("#btn-file-add")
  .addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("New File");
  });

document
  .querySelector("#btn-refresh")
  .addEventListener("click", (event) => {
    event.stopPropagation();
    console.log("Refresh");
  });

Decorations

Elements in the decorations slot are always visible, in contrast to the actions slot.

Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et efficitur augue.

<vscode-collapsible title="Decorations example" class="collapsible">
  <vscode-badge variant="counter" slot="decorations">99</vscode-badge>
  <p>
    Suspendisse potenti. Maecenas eu egestas metus. Nulla eget placerat mi, et
    efficitur augue.
  </p>
</vscode-collapsible>

.collapsible p {
  margin: 10px;
}

Overflown content

The overflown content of the Collapsible component is hidden by default. Sometimes, this behavior can be problematic. In such cases, it is useful that the Collapsible body is customizable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem

Ipsum

Dolor

Sit

Amur

Sadispcing

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<vscode-collapsible title="Customized CSS part example" class="css-part-example" open>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <vscode-single-select>
    <vscode-option>Lorem</vscode-option>
    <vscode-option>Ipsum</vscode-option>
    <vscode-option>Dolor</vscode-option>
    <vscode-option>Sit</vscode-option>
    <vscode-option>Et</vscode-option>
    <vscode-option>Amur</vscode-option>
    <vscode-option>Sadispcing</vscode-option>
  </vscode-single-select>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</vscode-collapsible>

.css-part-example::part(body) {
  overflow: visible;
}

.css-part-example p:last-child {
  margin-bottom: 0;
}

Displaying large amounts of data

Long content can be managed by the Scrollable component.

<vscode-collapsible
  title="Timeline"
  description="vscode-collapsible.ts"
  class="collapsible complex-example"
  open
>
  <vscode-icon name="pin" action-icon slot="actions" id="pin-icon"
  ></vscode-icon>
  <vscode-icon name="refresh" action-icon slot="actions" id="refresh-icon"
  ></vscode-icon>
  <vscode-icon name="filter" action-icon slot="actions" id="filter-icon"
  ></vscode-icon>
  <vscode-scrollable>
    <vscode-tree id="tree-example"></vscode-tree>
  </vscode-scrollable>
</vscode-collapsible>

.collapsible.complex-example vscode-scrollable {
  height: 200px;
}

const icons = {
  leaf: "circle-outline",
};
const tree = document.getElementById("tree-example");
document.getElementById("pin-icon").addEventListener("click", (ev) => {
  ev.stopPropagation();
});
document.getElementById("refresh-icon").addEventListener("click", (ev) => {
  ev.stopPropagation();
});
document.getElementById("filter-icon").addEventListener("click", (ev) => {
  ev.stopPropagation();
});

tree.data = [
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
  { icons, label: "File Saved" },
];