diff --git a/hlx_statics/blocks/codeblock/codeblock.css b/hlx_statics/blocks/codeblock/codeblock.css
index 352b8ed9d..e8ae60372 100644
--- a/hlx_statics/blocks/codeblock/codeblock.css
+++ b/hlx_statics/blocks/codeblock/codeblock.css
@@ -118,6 +118,47 @@ main div.codeblock-wrapper div.codeblock .hidden {
   display: none;
 }
 
+main div.codeblock-wrapper div.codeblock .right-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+main div.codeblock-wrapper div.codeblock .collapse-toggle {
+  flex: 0 0 auto;
+  padding: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: rgb(209, 209, 209);
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  transition: color 0.15s, background-color 0.15s;
+}
+
+main div.codeblock-wrapper div.codeblock .collapse-toggle:hover {
+  color: rgb(255, 255, 255);
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+main div.codeblock-wrapper div.codeblock .collapse-toggle svg {
+  fill: currentColor;
+  display: block;
+  transition: transform 0.2s ease;
+}
+
+main div.codeblock-wrapper div.codeblock.collapsed .collapse-toggle svg {
+  transform: rotate(-90deg);
+}
+
+main div.codeblock-wrapper div.codeblock.collapsed .tabs-panel {
+  display: none;
+}
+
 main div.codeblock-wrapper div.codeblock pre[class*=language-].no-line-numbers .line-highlight {
   transform: translateY(-1.6em);
 }
diff --git a/hlx_statics/blocks/codeblock/codeblock.js b/hlx_statics/blocks/codeblock/codeblock.js
index 1dd1d5fae..3a03f238b 100644
--- a/hlx_statics/blocks/codeblock/codeblock.js
+++ b/hlx_statics/blocks/codeblock/codeblock.js
@@ -84,11 +84,15 @@ export default function decorate(block) {
     }
   });
   
+  const rightControls = document.createElement('div');
+  rightControls.className = 'right-controls';
+  controlBar.append(rightControls);
+
   const select = document.createElement('select');
   select.id = selectId;
   select.classList.toggle('hidden', !areTabsGrouped);
   select.addEventListener('change', handleSelectChange);
-  controlBar.append(select);
+  rightControls.append(select);
 
   // set up customizable select (as opposed to classic which can't be styled) as described in https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select
   const selectButton = document.createElement('button');
@@ -113,6 +117,19 @@ export default function decorate(block) {
     decoratePreformattedCode(panel);
   });
 
+  const collapseToggle = document.createElement('button');
+  collapseToggle.className = 'collapse-toggle';
+  collapseToggle.setAttribute('type', 'button');
+  collapseToggle.setAttribute('aria-label', 'Collapse code');
+  collapseToggle.setAttribute('aria-expanded', 'true');
+  collapseToggle.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3.47 5.22a.75.75 0 0 1 1.06 0L8 8.69l3.47-3.47a.75.75 0 1 1 1.06 1.06l-4 4a.75.75 0 0 1-1.06 0l-4-4a.75.75 0 0 1 0-1.06Z"/></svg>';
+  collapseToggle.addEventListener('click', () => {
+    const isCollapsed = block.classList.toggle('collapsed');
+    collapseToggle.setAttribute('aria-expanded', String(!isCollapsed));
+    collapseToggle.setAttribute('aria-label', isCollapsed ? 'Expand code' : 'Collapse code');
+  });
+  rightControls.append(collapseToggle);
+
   // initialize by simulating a click on the first tab
     const firstTab = block.querySelector('[role=tab]');
     if (firstTab) {