Skip to content
VSCode Elements Lite

Collapsible

Collapsible is based on the <details> HTML element. MDN Reference

Basic example

Collapsible

Collapsible content.

 
<details class="vscode-collapsible">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible</h2>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>

Initially open

Collapsible

Collapsible content.

 
<details class="vscode-collapsible" open>
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible</h2>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>

Description

Additional information in the header. It is only visible when component is open.

Collapsible Collapsible description

Collapsible content.

 
<details class="vscode-collapsible">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">
      Collapsible <span class="description">Collapsible description</span>
    </h2>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>

Actions

Actions are clickable buttons in the header when the Collapsible component is open and the cursor hovers over it.

Timeline

Collapsible content.

 
<details class="vscode-collapsible">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Timeline</h2>
    <div class="actions">
      <button type="button" class="vscode-action-button" title="New File">
        <i class="codicon codicon-new-file" aria-hidden="true"></i>
      </button>
      <button type="button" class="vscode-action-button" title="New Folder">
        <i class="codicon codicon-new-folder" aria-hidden="true"></i>
      </button>
    </div>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>

Always show actions

Actions are always visible when Collapsible is open. It is intended to reflect the workbench.view.alwaysShowHeaderActions option.

Timeline

Collapsible content.

 
<details class="vscode-collapsible always-show-actions">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Timeline</h2>
    <div class="actions">
      <button type="button" class="vscode-action-button" title="New File">
        <i class="codicon codicon-new-file" aria-hidden="true"></i>
      </button>
      <button type="button" class="vscode-action-button" title="New Folder">
        <i class="codicon codicon-new-folder" aria-hidden="true"></i>
      </button>
    </div>
  </summary>
  <div>
    <p>Collapsible content.</p>
  </div>
</details>

Exclusive accordion mode

Multiple Collapsible components connected together, where only one can be open at a time. MDN Reference

Collapsible 1

Collapsible 1 content.

Collapsible 2

Collapsible 2 content.

Collapsible 3

Collapsible 3 content.

 
<details class="vscode-collapsible" name="accordion-example">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible 1</h2>
  </summary>
  <div>
    <p>Collapsible 1 content.</p>
  </div>
</details>
<details class="vscode-collapsible" name="accordion-example">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible 2</h2>
  </summary>
  <div>
    <p>Collapsible 2 content.</p>
  </div>
</details>
<details class="vscode-collapsible" name="accordion-example">
  <summary>
    <i class="codicon codicon-chevron-right icon-arrow"></i>
    <h2 class="title">Collapsible 3</h2>
  </summary>
  <div>
    <p>Collapsible 3 content.</p>
  </div>
</details>