Add Collapsible toggle example

Author: bendera

src/components/examples/collapsible/ToggleExample.astro

@@ -0,0 +1,11 @@
+<vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
+  <p>Test content</p>
+</vscode-collapsible>
+
+<script>
+  const el = document.querySelector("#toggle-event-example");
+
+  el?.addEventListener("vsc-collapsible-toggle", (ev) => {
+    console.log(ev);
+  });
+</script>

src/content/components/collapsible.mdx

@@ -7,6 +7,7 @@ import BasicExample from "@components/examples/collapsible/BasicExample.astro";
 import ActionsExample from "@components/examples/collapsible/ActionsExample.astro";
 import DecorationsExample from "@components/examples/collapsible/DecorationsExample.astro";
 import ScrollableExample from "@components/examples/collapsible/ScrollableExample.astro";
+import ToggleExample from "@components/examples/collapsible/ToggleExample.astro";
 import Imports from "@components/examples/collapsible/Imports.astro";
 
 <Imports />
@@ -34,6 +35,30 @@ import Imports from "@components/examples/collapsible/Imports.astro";
   </Fragment>
 </Demo>
 
+## Toggle event
+
+A custom event is dispatched when the visibility of content changes.
+
+<Demo>
+  <ToggleExample />
+  <Fragment slot="html">
+    ```html
+    <vscode-collapsible title="Dispatch toggle event" id="toggle-event-example">
+      <p>Test content</p>
+    </vscode-collapsible>
+    ```
+  </Fragment>
+  <Fragment slot="js">
+    ```javascript
+    const el = document.querySelector("#toggle-event-example");
+
+    el.addEventListener("vsc-collapsible-toggle", (ev) => {
+      console.log(ev);
+    });
+    ```
+  </Fragment>
+</Demo>
+
 ## Actions
 
 Clickable action icons. Please review the developer console for logged messages. These icons are