docs(collapsible): update

docs/app/components/content/examples/collapsible/CollapsibleExample.vue

@@ -1,9 +0,0 @@
-<template>
-  <UCollapsible class="w-48">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
-
-    <template #content>
-      <Placeholder class="h-48" />
-    </template>
-  </UCollapsible>
-</template>

docs/app/components/content/examples/collapsible/CollapsibleOpenExample.vue

@@ -8,7 +8,13 @@ defineShortcuts({
 
 <template>
   <UCollapsible v-model:open="open" class="w-48">
-    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+    <UButton
+      label="Open"
+      color="gray"
+      variant="subtle"
+      trailing-icon="i-heroicons-chevron-down-20-solid"
+      block
+    />
 
     <template #content>
       <Placeholder class="h-48" />

docs/content/3.components/collapsible.md

@@ -15,11 +15,28 @@ Use a [Button](/components/button) or any other component in the default slot of
 
 Then, use the `#content` slot to add the content displayed when the Collapsible is open.
 
-::component-example
+::component-code
 ---
-name: 'collapsible-example'
+prettier: true
+ignore:
+  - class
 class: 'justify-center'
+props:
+  class: 'w-48'
+slots:
+  default: |
+
+    <UButton label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block />
+
+  content: |
+
+    <Placeholder class="h-48" />
 ---
+
+:u-button{label="Open" color="gray" variant="subtle" trailing-icon="i-heroicons-chevron-down-20-solid" block}
+
+#content
+:placeholder{class="h-48"}
 ::
 
 ## Examples