docs(accordion): move expandable accordion recipe

docs/src/pages/components/Accordion.svx

@@ -10,8 +10,6 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
-See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
-
 ### Default
 
 <Accordion>
@@ -84,6 +82,12 @@ See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a togglea
   </AccordionItem>
 </Accordion>
 
+### Programmatic example
+
+This example demonstrates how a list of items can be programmatically expanded and collapsed.
+
+<FileSource src="/framed/Accordion/ExpandableAccordion" />
+
 ### Extra-large size
 
 <Accordion size="xl">

docs/src/pages/framed/Accordion/ExpandableAccordion.svelte

@@ -1,5 +1,7 @@
 <script>
-  export let items = [
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  const items = [
     {
       title: "Natural Language Classifier",
       description:
@@ -17,26 +19,17 @@
     },
   ];
 
-  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
-
   let open = false;
 </script>
 
-<Button
+<Button kind="ghost" size="field" on:click="{() => (open = !open)}">
-  kind="ghost"
-  size="field"
-  on:click="{() => {
-    open = !open;
-  }}"
->
   {open ? "Collapse" : "Expand"}
   all
 </Button>
 
 <Accordion>
   {#each items as item}
-    <AccordionItem open="{open}">
+    <AccordionItem title="{item.title}" open="{open}">
-      <h5 slot="title">{item.title}</h5>
       <p>{item.description}</p>
     </AccordionItem>
   {/each}

docs/src/pages/recipes/ExpandableAccordion.svx

@@ -1,13 +0,0 @@
----
-layout: recipe
----
-
-<script>
-  import Preview from "../../components/Preview.svelte";
-</script>
-
-## Expandable accordion
-
-This example expands and collapses all accordion items.
-
-<FileSource src="/framed/Accordion/ExpandableAccordion" />