diff --git a/docs/src/pages/components/CodeSnippet.svx b/docs/src/pages/components/CodeSnippet.svx
index fb0a6bbc..d86f3894 100644
--- a/docs/src/pages/components/CodeSnippet.svx
+++ b/docs/src/pages/components/CodeSnippet.svx
@@ -59,7 +59,7 @@ For dynamically updated code, you must use the `code` prop instead of the defaul
 
 ### Hidden multi-line code
 
-There may be cases where your code snippet is visually hidden. The logic to render the "Show more" button relies on the element's computed height. For visually hidden content, the button will not appear because the height is `0`.
+There may be cases where your code snippet is hidden in the DOM. The logic to render the "Show more" button relies on the element's computed height. For hidden content, the button will not appear because the computed height is `0`.
 
 The recommended workaround is to re-render the component. See the example below.
 
diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 079d8b05..93251d83 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -28,5 +28,7 @@
 {#if toggled}
   <br /><br />
   <h5>"Show more" will render</h5><br />
-  <CodeSnippet type="multi" code="{code}" />
+  <div class:hidden="{!toggled}">
+    <CodeSnippet type="multi" code="{code}" />
+  </div>
 {/if}