From 25a7ceacf89adfd1bda7e552d352bb684ced60a8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 30 Oct 2020 10:43:30 -0700
Subject: [PATCH] docs(code-snippet): simplify hidden code snippet example

---
 .../CodeSnippet/HiddenCodeSnippet.svelte      | 50 ++++++++-----------
 1 file changed, 22 insertions(+), 28 deletions(-)

diff --git a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
index 29987a3c..079d8b05 100644
--- a/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
+++ b/docs/src/pages/framed/CodeSnippet/HiddenCodeSnippet.svelte
@@ -1,38 +1,32 @@
 <script>
-  import { CodeSnippet, Tabs, Tab, TabContent } from "carbon-components-svelte";
+  import { ToggleSmall, CodeSnippet } from "carbon-components-svelte";
 
-  let selected = 0;
+  let toggled = false;
 
   const code = Array.from({ length: 20 }, (_, i) => i + 1).join("\n");
 </script>
 
 <style>
-  p {
-    margin-bottom: var(--cds-spacing-05);
+  .hidden {
+    display: none;
   }
 </style>
 
-<Tabs bind:selected>
-  <Tab label="Tab 1" />
-  <Tab label="Tab 2" />
-  <div slot="content">
-    <TabContent>
-      <p>Tab 2 contains a multi-line code snippet.</p>
-      <p>
-        Inactive tab content is visually hidden but still rendered in the DOM.
-        As a result, the "Show more" button will not appear because the computed
-        height of the code element is 0.
-      </p>
-      <p>
-        To work around this, you can force the code snippet to be re-rendered
-        when the tab content is active.
-      </p>
-    </TabContent>
-    <TabContent>
-      <p>The "Show more" button should appear.</p>
-      {#if selected === 1}
-        <CodeSnippet type="multi" code="{code}" />
-      {/if}
-    </TabContent>
-  </div>
-</Tabs>
+<ToggleSmall
+  style="margin-bottom: var(--cds-spacing-05)"
+  labelText="Show code snippets"
+  bind:toggled
+/>
+
+{#if toggled}
+  <h5>"Show more" will not render</h5><br />
+{/if}
+<div class:hidden="{!toggled}">
+  <CodeSnippet type="multi" code="{code}" />
+</div>
+
+{#if toggled}
+  <br /><br />
+  <h5>"Show more" will render</h5><br />
+  <CodeSnippet type="multi" code="{code}" />
+{/if}