From 882737c8b8c618a06dea762b5a4592d7cd86cda2 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:48:12 -0700
Subject: [PATCH] docs(code-snippet): update hidden example copy

---
 docs/src/pages/components/CodeSnippet.svx                  | 2 +-
 docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

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}