Collapsible

• Docs
• API

Basic example

Open by default

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

HTML

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

CSS

vscode-collapsible p {
  margin: 10px;
}

Toggle event

A custom event is dispatched when the visibility of content changes. Check the console log for the triggered events.

Test content

HTML

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

JavaScript

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.

HTML

<vscode-collapsible heading="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>

CSS

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

JavaScript

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.

99

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

HTML

<vscode-collapsible heading="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>

CSS

.collapsible p {
  margin: 10px;
}

Displaying large amounts of data

Long content can be managed by the Scrollable component.

File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved File saved

HTML

<vscode-collapsible
  heading="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>
      <vscode-tree-item>
        <vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
        File saved
      </vscode-tree-item>
      <vscode-tree-item>
        <vscode-icon name="circle-outline" slot="icon-leaf"></vscode-icon>
        File saved
      </vscode-tree-item>
      ...
    </vscode-tree>
  </vscode-scrollable>
</vscode-collapsible>

CSS

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

JavaScript

document.getElementById("pin-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});
document.getElementById("refresh-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});
document.getElementById("filter-icon").addEventListener("click", (ev) => {
  // Prevent collapsing of the component:
  ev.stopPropagation();
});