diff --git a/ec.config.mjs b/ec.config.mjs
index aa3e98230c885c..d03b63f96e00d4 100644
--- a/ec.config.mjs
+++ b/ec.config.mjs
@@ -5,6 +5,8 @@ import lightTheme from "solarflare-theme/themes/cloudflare-light-color-theme.jso
 import { definePlugin } from "@expressive-code/core";
 import { h } from "@expressive-code/core/hast";
 
+import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
+
 import lzstring from "lz-string";
 
 /**
@@ -156,6 +158,7 @@ export default {
 		workersPlaygroundButton(),
 		outputCodeblocks(),
 		defaultLanguageTitles(),
+		pluginCollapsibleSections(),
 	],
 	themes: [darkTheme, lightTheme],
 	styleOverrides: {
diff --git a/package-lock.json b/package-lock.json
index 4d70b40a945d6a..ab6f2d34abf43d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
 				"@cloudflare/vitest-pool-workers": "^0.5.40",
 				"@cloudflare/workers-types": "^4.20241218.0",
 				"@codingheads/sticky-header": "^1.0.2",
+				"@expressive-code/plugin-collapsible-sections": "^0.38.3",
 				"@iarna/toml": "^2.2.5",
 				"@iconify-json/material-symbols": "^1.2.12",
 				"@stoplight/json-schema-tree": "^4.0.0",
@@ -2818,6 +2819,16 @@
 				"unist-util-visit-parents": "^6.0.1"
 			}
 		},
+		"node_modules/@expressive-code/plugin-collapsible-sections": {
+			"version": "0.38.3",
+			"resolved": "https://registry.npmjs.org/@expressive-code/plugin-collapsible-sections/-/plugin-collapsible-sections-0.38.3.tgz",
+			"integrity": "sha512-0r1k4k5S7GBLIRBYFkMKeIyD9iYcwM+LBrwoxZtd9TtBYJ3ziWBleFlCoOA3fo/Mj2YcaN7ZRIscMzYY9JBWrA==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"@expressive-code/core": "^0.38.3"
+			}
+		},
 		"node_modules/@expressive-code/plugin-frames": {
 			"version": "0.38.3",
 			"resolved": "https://registry.npmjs.org/@expressive-code/plugin-frames/-/plugin-frames-0.38.3.tgz",
diff --git a/package.json b/package.json
index 2479f7733d1667..bd11e46895f7f2 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
 		"@cloudflare/vitest-pool-workers": "^0.5.40",
 		"@cloudflare/workers-types": "^4.20241218.0",
 		"@codingheads/sticky-header": "^1.0.2",
+		"@expressive-code/plugin-collapsible-sections": "^0.38.3",
 		"@iarna/toml": "^2.2.5",
 		"@iconify-json/material-symbols": "^1.2.12",
 		"@stoplight/json-schema-tree": "^4.0.0",
diff --git a/src/content/docs/style-guide/components/code.mdx b/src/content/docs/style-guide/components/code.mdx
index b9eb515679d7a4..e91c344e5bfcae 100644
--- a/src/content/docs/style-guide/components/code.mdx
+++ b/src/content/docs/style-guide/components/code.mdx
@@ -10,6 +10,15 @@ This is just a small showcase of functionality, it has a lot of options!
 Write-Output "This one has a title!"
 ```
 
+```js collapse={3-5}
+// Collapsing
+const foo = {
+  1: 1,
+  2: 2,
+  3: 3,
+};
+```
+
 ```js wrap
 // Example with wrap
 function getLongString() {