« E2 - Collapsible Panel Demo

Vertical Panels (Default)

Panels that collapse/expand vertically, useful for sidebars and tool panels.

Horizontal Panels

Panels that collapse/expand horizontally, useful for toolboxes and inspector panels.

Resizable Panels

Panels with resizable edges. Drag the thick borders to resize!
Note: Vertical panels can only be resized vertically (height), horizontal panels can only be resized horizontally (width).

Dark Theme

Copy-Paste Examples

Ready-to-use code snippets for your projects:

<!-- Load E2 Library -->
<script src="path/to/e2.min.js"></script>

<!-- Basic Collapsible Panel -->
<e2-collapsible-panel orientation="vertical">
  <span slot="title">Panel Title</span>
  <div>
    <h4>Content Title</h4>
    <p>Your panel content goes here...</p>
    <ul>
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </div>
</e2-collapsible-panel>

<!-- Resizable panel with size constraints -->
<e2-collapsible-panel
  orientation="vertical"
  resize-right
  resize-bottom
  min-width="200"
  max-width="500"
  min-height="150"
  max-height="400"
  style="width: 300px; height: 200px;">
  <span slot="title">Resizable Panel</span>
  <div>Drag the thick borders to resize!</div>
</e2-collapsible-panel>

// Get panel reference
const panel = document.querySelector('e2-collapsible-panel');

// Control programmatically
panel.expand();    // Expand panel
panel.collapse();  // Collapse panel
panel.toggle();    // Toggle state

// Configure resize options
panel.resizeRight = true;
panel.resizeBottom = true;
panel.minWidth = 200;
panel.maxWidth = 500;

// Listen for events
panel.addEventListener('collapsible-panel-toggle', (event) => {
  console.log('Panel toggled:', event.detail);
});

panel.addEventListener('collapsible-panel-resize-start', (event) => {
  console.log('Resize started:', event.detail);
});

panel.addEventListener('collapsible-panel-resize-end', (event) => {
  console.log('Resize ended:', event.detail);
});

// Change properties
panel.orientation = "horizontal";

Programmatic Controls