docs: (themesberg#900) nesting accordian (themesberg#936)

shinokada · Jul 19, 2023 · db146a7 · db146a7
1 parent c4030df
commit db146a7
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/src/routes/docs/components/accordion.md b/src/routes/docs/components/accordion.md
@@ -260,6 +260,48 @@ The default transition of `AccordionItem`s is <A href="https://svelte.dev/docs#r
 </Accordion>
 ```
 
+## Nesting accordians
+
+Accordions can be nested. All of the mentioned options are supported.
+
+```svelte example hideScript
+<script>
+  import {AccordionItem, Accordion} from 'flowbite-svelte'
+</script>
+<Accordion>
+  <AccordionItem open>
+    <span slot="header">My Header 1</span>
+    <Accordion>
+      <AccordionItem>
+        <span slot="header">My Header 1</span>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+        <p class="text-gray-500 dark:text-gray-400">Check out this guide to learn how to <a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline">get started</a> and start developing websites even faster with components on top of Tailwind CSS.</p>
+      </AccordionItem>
+      <AccordionItem>
+        <span slot="header">My Header 2</span>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+        <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+        <ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
+          <li><a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" >Lorem ipsum</a></li>
+          <li><a href="https://tailwindui.com/" rel="noreferrer" target="_blank"  class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+        </ul>
+      </AccordionItem>
+    </Accordion>
+  </AccordionItem>
+  <AccordionItem>
+    <span slot="header">My Header 2</span>
+    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+    <p class="mb-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo ab necessitatibus sint explicabo ...</p>
+    <p class="mb-2 text-gray-500 dark:text-gray-400">Learn more about these technologies:</p>
+    <ul class="list-disc pl-5 dark:text-gray-400 text-gray-500">
+      <li><a href="/" target="_blank" rel="noreferrer" class="text-blue-600 dark:text-blue-500 hover:underline" >Lorem ipsum</a></li>
+      <li><a href="https://tailwindui.com/" rel="noreferrer" target="_blank"  class="text-blue-600 dark:text-blue-500 hover:underline">Tailwind UI</a></li>
+    </ul>
+  </AccordionItem>
+</Accordion>
+```
+
 ## Props
 
 The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.