Collapse Benchmark

Bootstrap 5 Collapse JS vs Native <details>/<summary>

<details> / <summary> ::details-content
Bootstrap JS

Uses bootstrap.Collapse — reads scrollHeight to calculate height, sets inline style.height, swaps .collapsing class, waits for transitionend.

This content is toggled by Bootstrap Collapse JS.
Native Browser API

Uses <details> / <summary> — browser handles state, accessibility, keyboard support. Zero JavaScript.

Click to expand (Native)
This content is toggled by the native <details> element. Zero JS.
Initializing... 0%

Results

Metric Bootstrap Collapse Native <details>
Initialization time (50 instances) - -
Toggle time (100 cycles × 50 items) - -
Instance memory cost (50 instances) - -
JS code size
collapse.js (8.6 KB)
- -
CSS output size
_transitions.scss (0.4 KB)
- -
Bootstrap JS 50 items — data-bs-toggle="collapse"
Native Browser API 50 items — <details>/<summary>
About animation: Bootstrap Collapse animates open/close using JavaScript (reads scrollHeight, sets inline height, swaps .collapsing class, waits for transitionend). Native <details> opens instantly by default. However, native <details> can achieve the same smooth animation using pure CSS via the ::details-content pseudo-element — zero JavaScript required. The benchmark above disables all transitions to measure raw JS overhead only.

Live Example: Animated Native <details> vs Bootstrap Collapse

Click items below to compare the animation feel. Both have a 0.35s ease transition. The native side uses only CSS.

Bootstrap JS JS animation (.collapsing + scrollHeight)
This content is animated by Bootstrap’s JavaScript. It reads scrollHeight to calculate height, sets an inline style.height, adds the .collapsing class, then waits for transitionend to swap to .collapse.show.
Second collapsible item. Each toggle triggers a synchronous layout reflow (scrollHeight read), multiple class changes, and inline style mutations.
Third item. Bootstrap Collapse: 270 lines of JS, plus BaseComponent, EventHandler, and SelectorEngine dependencies.
Native Browser API CSS-only animation (::details-content)
Click to expand (Native)
This content is animated by pure CSS. The ::details-content pseudo-element transitions block-size from 0 to auto. Zero JavaScript. The browser handles everything: state management, accessibility, keyboard support.
Another item (Native)
Second item. No scrollHeight reads, no forced reflows, no class toggling, no inline styles. The browser’s CSS engine interpolates block-size: 0 → block-size: auto natively.
Third item (Native)
Third item. Total JavaScript required: 0 lines. Just 6 lines of CSS on ::details-content to match Bootstrap’s animation.
CSS used for native animation (entire implementation)
details {
  /* Required: enables transition between 0 and auto */
  interpolate-size: allow-keywords;
}
details::details-content {
  transition: block-size 0.35s ease,
              content-visibility 0.35s ease allow-discrete;
  block-size: 0;
  overflow: hidden;
}
details[open]::details-content {
  block-size: auto;
}