diff --git a/hlx_statics/blocks/codeblock/codeblock.css b/hlx_statics/blocks/codeblock/codeblock.css
index 9d9333f8..55612eaa 100644
--- a/hlx_statics/blocks/codeblock/codeblock.css
+++ b/hlx_statics/blocks/codeblock/codeblock.css
@@ -29,6 +29,7 @@ main div.codeblock-wrapper div.codeblock .inline-code {
 
 main div.codeblock-wrapper div.codeblock .control-bar {
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -37,6 +38,7 @@ main div.codeblock-wrapper div.codeblock .control-bar {
 main div.codeblock-wrapper div.codeblock .control-bar,
 main div.codeblock-wrapper div.codeblock .control-bar .tabs-list {
   display: flex;
+  align-items: center;
   gap: 16px;
   max-width: 100%;
   overflow-x: auto;
@@ -59,6 +61,9 @@ main div.codeblock-wrapper div.codeblock .control-bar select {
   white-space: unset;
   cursor: pointer;
   background-color: initial;
+}
+
+main div.codeblock-wrapper div.codeblock .control-bar .tabs-list button {
   border-bottom: 3px solid transparent;
 }
 
@@ -84,18 +89,30 @@ main div.codeblock-wrapper div.codeblock .control-bar select::picker(select) {
 
 main div.codeblock-wrapper div.codeblock .control-bar select {
   border: none;
+  display: flex;
+  align-items: center;
+}
+
+main div.codeblock-wrapper div.codeblock .control-bar select > button {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  color: rgb(209, 209, 209);
 }
 
 main div.codeblock-wrapper div.codeblock .control-bar select selectedcontent {
-  margin: auto;
+  display: flex;
+  align-items: center;
 }
 
 main div.codeblock-wrapper div.codeblock .control-bar select::picker-icon {
   content: "⌄";
-  margin: auto;
-  padding-bottom: 6px;
+  display: flex;
+  align-items: center;
   font-weight: bold;
-  transform: scaleX(1.5);
+  transform: scaleX(1.5) translateY(-1px);
 }
 
 main div.codeblock-wrapper div.codeblock .control-bar select::picker(select) {
@@ -123,6 +140,39 @@ 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;
+  margin-left: 8px;
+  padding-top: 2px;
+  font-size: 14px;
+  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.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 1dd1d5fa..02c2c48b 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,20 @@ 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.textContent = 'Hide';
+  collapseToggle.addEventListener('click', () => {
+    const isCollapsed = block.classList.toggle('collapsed');
+    collapseToggle.setAttribute('aria-expanded', String(!isCollapsed));
+    collapseToggle.setAttribute('aria-label', isCollapsed ? 'Expand code' : 'Collapse code');
+    collapseToggle.textContent = isCollapsed ? 'Show' : 'Hide';
+  });
+  rightControls.append(collapseToggle);
+
   // initialize by simulating a click on the first tab
     const firstTab = block.querySelector('[role=tab]');
     if (firstTab) {