docs(recipes): add ExpandableAccordion recipe

docs/src/pages/components/Accordion.svx

@@ -10,6 +10,8 @@ components: ["Accordion", "AccordionItem", "AccordionSkeleton"]
   import Preview from "../../components/Preview.svelte";
 </script>
 
+See the [ExpandableAccordion recipe](/recipes/ExpandableAccordion) for a toggleable accordion component.
+
 ### Default
 
 <Accordion>

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

@@ -0,0 +1,43 @@
+<script>
+  export let items = [
+    {
+      title: "Natural Language Classifier",
+      description:
+        "Natural Language Classifier uses advanced natural language processing and machine learning techniques to create custom classification models. Users train their data and the service predicts the appropriate category for the inputted text.",
+    },
+    {
+      title: "Natural Language Understanding",
+      description:
+        "Analyze text to extract meta-data from content such as concepts, entities, emotion, relations, sentiment and more.",
+    },
+    {
+      title: "Language Translator",
+      description:
+        "Translate text, documents, and websites from one language to another. Create industry or region-specific translations via the service's customization capability.",
+    },
+  ];
+
+  import { Accordion, AccordionItem, Button } from "carbon-components-svelte";
+
+  let open = false;
+</script>
+
+<Button
+  kind="ghost"
+  size="field"
+  on:click="{() => {
+    open = !open;
+  }}"
+>
+  {open ? 'Collapse' : 'Expand'}
+  all
+</Button>
+
+<Accordion>
+  {#each items as item}
+    <AccordionItem open="{open}">
+      <h5 slot="title">{item.title}</h5>
+      <p>{item.description}</p>
+    </AccordionItem>
+  {/each}
+</Accordion>

docs/src/pages/recipes/ExpandableAccordion.svx

@@ -0,0 +1,13 @@
+---
+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" />