diff --git a/packages/docs/pages/components/Collapse.md b/packages/docs/pages/components/Collapse.md
index 7adebdc45..449abdd66 100644
--- a/packages/docs/pages/components/Collapse.md
+++ b/packages/docs/pages/components/Collapse.md
@@ -4,9 +4,9 @@
 
 <section class="odocs-head">
 
-The **Collapse** component is an easy way to toggle the visibility of content with show/hide functionality.
-It has two elements: a disclosure button and a section of content whose visibility is controlled by the button.
-The component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and also supports the W3C ARIA APG [Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+The **Collapse** component (also known as _accordion_) is a disclosure widget which is used to toggle the display of further information.
+The component is implemented based on the [HTML \<details\> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) and consists of two elements: a short disclosure label (trigger) and a section of content whose visibility it controls; the content can be 'collapsed' or 'expanded'.
+This component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and also supports the W3C ARIA APG [Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
 
 </section>
 
@@ -22,7 +22,7 @@ The component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https
 
 ## Collapse Component
 
-> An easy way to toggle what you want.
+> An easy disclosure widget to toggle content visability.
 
 ```html
 <o-collapse></o-collapse>
@@ -30,23 +30,24 @@ The component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https
 
 ### Props
 
-| Prop name | Description                                                                  | Type              | Values          | Default                                                                                                                                              |
-| --------- | ---------------------------------------------------------------------------- | ----------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| animation | Custom animation (transition name)                                           | string            | -               | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;animation: "fade"<br>}</code> |
-| contentId | Id property of the content container - default is an uuid                    | string            | -               | <code style='white-space: nowrap; padding: 0;'>useId()</code>                                                                                        |
-| expanded  | Expand the trigger to fullwidth                                              | boolean           | -               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                          |
-| open      | Whether collapse is open or not, use v-model:open to make it two-way binding | boolean           | -               | <code style='white-space: nowrap; padding: 0;'>true</code>                                                                                           |
-| override  | Override existing theme classes completely                                   | boolean           | -               |                                                                                                                                                      |
-| position  | Trigger position                                                             | "bottom" \| "top" | `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;position: "top"<br>}</code>   |
-| triggerId | Id property of the trigger container - default is an uuid                    | string            | -               | <code style='white-space: nowrap; padding: 0;'>useId()</code>                                                                                        |
+| Prop name | Description                                                                                                                                                                    | Type              | Values          | Default                                                                                                                                               |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| contentId | Id property of the content container - default is an uuid                                                                                                                      | string            | -               | <code style='white-space: nowrap; padding: 0;'>useId()</code>                                                                                         |
+| expanded  | Expand the trigger to fullwidth                                                                                                                                                | boolean           | -               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| label     | Some label displayed in the summary element - unnecessary when trigger slot is used                                                                                            | string            | -               |                                                                                                                                                       |
+| name      | Setting the same name to multiple collapse elements connects them together,<br/>with only one open at a time.<br/>This allows to easily create UI features such as accordions. | string            | -               |                                                                                                                                                       |
+| open      | Whether collapse is open or not, use v-model:open to make it two-way binding                                                                                                   | boolean           | -               | <code style='white-space: nowrap; padding: 0;'>false</code>                                                                                           |
+| override  | Override existing theme classes completely                                                                                                                                     | boolean           | -               |                                                                                                                                                       |
+| position  | Trigger position                                                                                                                                                               | "bottom" \| "top" | `top`, `bottom` | <div><small>From <b>config</b>:</small></div><code style='white-space: nowrap; padding: 0;'>collapse: {<br>&nbsp;&nbsp;position: "bottom"<br>}</code> |
+| triggerId | Id property of the trigger container - default is an uuid                                                                                                                      | string            | -               | <code style='white-space: nowrap; padding: 0;'>useId()</code>                                                                                         |
 
 ### Events
 
-| Event name  | Properties                              | Description               |
-| ----------- | --------------------------------------- | ------------------------- |
-| update:open | **value** `boolean` - updated open prop | open prop two-way binding |
-| open        |                                         | on collapse opened        |
-| close       |                                         | on collapse closed        |
+| Event name  | Properties                                        | Description               |
+| ----------- | ------------------------------------------------- | ------------------------- |
+| update:open | **value** `boolean` - updated open prop           | open prop two-way binding |
+| open        | **event** `ToggleEvent` - the native toggle event | on collapse opened        |
+| close       | **event** `ToggleEvent` - the native toggle event | on collapse closed        |
 
 ### Slots
 
diff --git a/packages/oruga/src/components/collapse/Collapse.vue b/packages/oruga/src/components/collapse/Collapse.vue
index fde2f38df..a45272a08 100644
--- a/packages/oruga/src/components/collapse/Collapse.vue
+++ b/packages/oruga/src/components/collapse/Collapse.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { computed, useId, useTemplateRef } from "vue";
 
 import { getDefault } from "@/utils/config";
 import { defineClasses } from "@/composables";
@@ -7,7 +7,7 @@ import { defineClasses } from "@/composables";
 import type { CollapseProps } from "./props";
 
 /**
- * An easy way to toggle what you want.
+ * An easy disclosure widget to toggle content visability.
  * @displayName Collapse
  * @style _collapse.scss
  */
@@ -19,10 +19,11 @@ defineOptions({
 
 const props = withDefaults(defineProps<CollapseProps>(), {
     override: undefined,
-    open: true,
+    open: false,
+    name: undefined,
+    label: undefined,
     expanded: false,
-    animation: () => getDefault("collapse.animation", "fade"),
-    position: () => getDefault("collapse.position", "top"),
+    position: () => getDefault("collapse.position", "bottom"),
     contentId: () => useId(),
     triggerId: () => useId(),
 });
@@ -33,10 +34,14 @@ const emits = defineEmits<{
      * @param value {boolean} - updated open prop
      */
     "update:open": [value: boolean];
-    /** on collapse opened */
-    open: [];
-    /** on collapse closed */
-    close: [];
+    /** on collapse opened
+     * @param event {ToggleEvent} - the native toggle event
+     */
+    open: [event: ToggleEvent];
+    /** on collapse closed
+     * @param event {ToggleEvent} - the native toggle event
+     */
+    close: [event: ToggleEvent];
 }>();
 
 defineSlots<{
@@ -49,16 +54,21 @@ defineSlots<{
     trigger?(props: { open: boolean }): void;
 }>();
 
-const isOpen = defineModel<boolean>("open", { default: true });
+const detailsRef = useTemplateRef("detailsElement");
+
+const isOpen = defineModel<boolean>("open", { default: false });
+
+/** detail open state toggle handler */
+function onToggle(event: ToggleEvent): void {
+    if (!detailsRef.value) return;
+
+    isOpen.value = detailsRef.value.open;
 
-/** Toggle and emit events */
-function toggle(): void {
-    isOpen.value = !isOpen.value;
-    if (isOpen.value) emits("open");
-    else emits("close");
+    if (detailsRef.value.open) emits("open", event);
+    else emits("close", event);
 }
 
-// --- Computed Component Classes ---
+// #region --- Computed Component Classes ---
 
 const rootClasses = defineClasses(
     ["rootClass", "o-collapse"],
@@ -81,31 +91,32 @@ const triggerClasses = defineClasses(
 );
 
 const contentClasses = defineClasses(["contentClass", "o-collapse__content"]);
+
+// #endregion --- Computed Component Classes ---
 </script>
 
 <template>
-    <div data-oruga="collapse" :class="rootClasses">
-        <div
+    <details
+        ref="detailsElement"
+        data-oruga="collapse"
+        :class="rootClasses"
+        :open="isOpen"
+        :name="name"
+        @toggle="onToggle">
+        <summary
             :id="triggerId"
-            :class="triggerClasses"
             role="button"
             tabindex="0"
+            :class="triggerClasses"
             :aria-controls="contentId"
-            :aria-expanded="isOpen"
-            @click="toggle"
-            @keydown.enter.prevent="toggle"
-            @keydown.space.prevent="toggle">
-            <slot name="trigger" :open="isOpen" />
-        </div>
+            :aria-expanded="isOpen">
+            <slot name="trigger" :open="isOpen">
+                {{ label }}
+            </slot>
+        </summary>
 
-        <Transition :name="animation">
-            <div
-                v-show="isOpen"
-                :id="contentId"
-                :class="contentClasses"
-                :aria-labelledby="triggerId">
-                <slot />
-            </div>
-        </Transition>
-    </div>
+        <div :id="contentId" :class="contentClasses">
+            <slot />
+        </div>
+    </details>
 </template>
diff --git a/packages/oruga/src/components/collapse/examples/accordion.vue b/packages/oruga/src/components/collapse/examples/accordion.vue
index 53f7bc71d..a420c96d6 100644
--- a/packages/oruga/src/components/collapse/examples/accordion.vue
+++ b/packages/oruga/src/components/collapse/examples/accordion.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const isOpen = ref(0);
-
 const collapses = ref([
     {
         title: "Open to read something intersting written for you!",
-        text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <br />
-          Nulla accumsan, metus ultrices eleifend gravida,   <br />
-          nulla nunc varius lectus, nec rutrum justo nibh eu lectus.  <br />
+        text: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br />
+          Nulla accumsan, metus ultrices eleifend gravida, <br />
+          nulla nunc varius lectus, nec rutrum justo nibh eu lectus. <br />
           Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque.`,
     },
     {
@@ -28,10 +26,9 @@ const collapses = ref([
             v-for="(collapse, index) of collapses"
             :key="index"
             class="card"
-            animation="slide"
+            name="my-accordion"
             expanded
-            :open="isOpen == index"
-            @update:open="isOpen = index">
+            :open="index === 0">
             <template #trigger="{ open }">
                 <div class="card-header">
                     <span class="card-header-title">
diff --git a/packages/oruga/src/components/collapse/examples/base.vue b/packages/oruga/src/components/collapse/examples/base.vue
index 463e9d726..56602828f 100644
--- a/packages/oruga/src/components/collapse/examples/base.vue
+++ b/packages/oruga/src/components/collapse/examples/base.vue
@@ -1,15 +1,15 @@
 <template>
     <section>
-        <o-collapse :open="false" expanded trigger-class="trigger">
+        <o-collapse expanded>
             <template #trigger="{ open }">
-                <b>
+                <h3 class="trigger">
                     <o-icon :icon="open ? 'chevron-down' : 'chevron-right'" />
                     {{ open ? "Close" : "Open" }} Collapse!
-                </b>
+                </h3>
             </template>
 
             <div class="notification">
-                <h3>Subtitle</h3>
+                <h4>Subtitle</h4>
                 <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     <br />
@@ -24,10 +24,10 @@
     </section>
 </template>
 
-<style lang="css" scoped>
-:deep(.trigger) {
+<style scoped>
+.trigger {
     padding: 1rem;
-    background-color: var(--vp-c-brand-1);
+    background-color: var(--vp-c-brand-2);
     color: white;
     box-shadow:
         0 2px 3px hsla(0, 0%, 4%, 0.1),
diff --git a/packages/oruga/src/components/collapse/examples/index.md b/packages/oruga/src/components/collapse/examples/index.md
index a014a9e09..673530ed6 100644
--- a/packages/oruga/src/components/collapse/examples/index.md
+++ b/packages/oruga/src/components/collapse/examples/index.md
@@ -2,22 +2,33 @@
 import Base from "./base.vue";
 import BaseCode from "./base.vue?raw";
 
+import Position from "./position.vue";
+import PositionCode from "./position.vue?raw";
+
 import Accordion from "./accordion.vue";
 import AccordionCode from "./accordion.vue?raw";
 </script>
 
 ### Base
 
-A custom trigger can be passed in the `trigger` slot.
+A custom trigger can be passed in the `trigger` slot oder by the `label` property.
+When the controlled content is hidden, the trigger is often styled as a typical push button with a right-pointing arrow or triangle, to indicate that activating the trigger will display the hidden content.
+When the content is visible, the arrow or triangle usually points down.
 
 ::: info Accessibility Note:
-The trigger container is already an interactive element with the `role="button"` attribute. For accessibility reasons, prevent adding other interactive elements such as buttons to avoid [nested-interactive](https://accessibilityinsights.io/info-examples/web/nested-interactive/) accessibility problems.
+The trigger container is already an interactive element with the `role="button"` attribute. For accessibility reasons, prevent adding other interactive elements such as buttons in the `trigger` slot to avoid [nested-interactive](https://accessibilityinsights.io/info-examples/web/nested-interactive/) accessibility problems.
 :::
 
 <ExampleViewer :component="Base" :code="BaseCode" />
 
+### Position
+
+The collapse can be configured by the `position` property to open to top instead of bottom.
+
+<ExampleViewer :component="Position" :code="PositionCode" />
+
 ### Accordion
 
-Combine multiple collapse components to create an accordion behaviour.
+Using the [`name`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details#name) property multiple collapse components can be connected to create an accordion behaviour, with only one content open at a time.
 
 <ExampleViewer :component="Accordion" :code="AccordionCode" />
diff --git a/packages/oruga/src/components/collapse/examples/inspector.vue b/packages/oruga/src/components/collapse/examples/inspector.vue
index 95456e3c1..ebb4cc782 100644
--- a/packages/oruga/src/components/collapse/examples/inspector.vue
+++ b/packages/oruga/src/components/collapse/examples/inspector.vue
@@ -36,25 +36,15 @@ const inspectData: InspectData<CollapseClasses, CollapseProps> = {
 
 <template>
     <inspector-wrapper v-slot="props" :inspect-data="inspectData">
-        <o-collapse
-            animation="slide"
-            :open="true"
-            expanded
-            class="card"
-            v-bind="props">
-            <template #trigger="props">
-                <div class="card-header" role="button">
-                    <span class="card-header-title"> Collapse Title </span>
-                    <span class="card-header-icon">
-                        <o-icon
-                            :icon="props.open ? 'caret-up' : 'caret-down'" />
-                    </span>
-                </div>
+        <o-collapse open expanded v-bind="props">
+            <template #trigger="{ open }">
+                <p>
+                    <o-icon :icon="open ? 'chevron-down' : 'chevron-right'" />
+                    {{ open ? "Close" : "Open" }} Collapse!
+                </p>
             </template>
 
-            <div class="card-content">
-                <div class="content">Collapse Content</div>
-            </div>
+            <div>Collapse Content</div>
         </o-collapse>
     </inspector-wrapper>
 </template>
diff --git a/packages/oruga/src/components/collapse/examples/position.vue b/packages/oruga/src/components/collapse/examples/position.vue
new file mode 100644
index 000000000..f0922bf76
--- /dev/null
+++ b/packages/oruga/src/components/collapse/examples/position.vue
@@ -0,0 +1,36 @@
+<template>
+    <section>
+        <o-collapse expanded position="top">
+            <template #trigger="{ open }">
+                <p class="trigger">
+                    <o-icon :icon="open ? 'chevron-down' : 'chevron-right'" />
+                    {{ open ? "Close" : "Open" }} Collapse!
+                </p>
+            </template>
+
+            <div class="notification">
+                <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                    <br />
+                    Nulla accumsan, metus ultrices eleifend gravida, nulla nunc
+                    varius lectus, nec rutrum justo nibh eu lectus.
+                    <br />
+                    Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
+                    erat vel, interdum mattis neque.
+                </p>
+            </div>
+        </o-collapse>
+    </section>
+</template>
+
+<style scoped>
+.trigger {
+    padding: 1rem;
+    background-color: var(--vp-c-brand-3);
+    color: white;
+    box-shadow:
+        0 2px 3px hsla(0, 0%, 4%, 0.1),
+        0 0 0 1px hsla(0, 0%, 4%, 0.1);
+    text-align: center;
+}
+</style>
diff --git a/packages/oruga/src/components/collapse/examples/readme.md b/packages/oruga/src/components/collapse/examples/readme.md
index 796252553..17360c7f5 100644
--- a/packages/oruga/src/components/collapse/examples/readme.md
+++ b/packages/oruga/src/components/collapse/examples/readme.md
@@ -1,3 +1,3 @@
-The **Collapse** component is an easy way to toggle the visibility of content with show/hide functionality.
-It has two elements: a disclosure button and a section of content whose visibility is controlled by the button.
-The component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and also supports the W3C ARIA APG [Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+The **Collapse** component (also known as _accordion_) is a disclosure widget which is used to toggle the display of further information.
+The component is implemented based on the [HTML \<details\> element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details) and consists of two elements: a short disclosure label (trigger) and a section of content whose visibility it controls; the content can be 'collapsed' or 'expanded'.
+This component implements the W3C ARIA APG [Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) and also supports the W3C ARIA APG [Accordion Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
diff --git a/packages/oruga/src/components/collapse/props.ts b/packages/oruga/src/components/collapse/props.ts
index 7461373fb..86956f7fa 100644
--- a/packages/oruga/src/components/collapse/props.ts
+++ b/packages/oruga/src/components/collapse/props.ts
@@ -5,8 +5,14 @@ export type CollapseProps = {
     override?: boolean;
     /** Whether collapse is open or not, use v-model:open to make it two-way binding */
     open?: boolean;
-    /** Custom animation (transition name) */
-    animation?: string;
+    /** Some label displayed in the summary element - unnecessary when trigger slot is used */
+    label?: string;
+    /**
+     * Setting the same name to multiple collapse elements connects them together,
+     * with only one open at a time.
+     * This allows to easily create UI features such as accordions.
+     */
+    name?: string;
     /**
      * Trigger position
      * @values top, bottom
diff --git a/packages/oruga/src/components/collapse/tests/__snapshots__/collapse.unit.test.ts.snap b/packages/oruga/src/components/collapse/tests/__snapshots__/collapse.unit.test.ts.snap
index a91254610..ecd60a99d 100644
--- a/packages/oruga/src/components/collapse/tests/__snapshots__/collapse.unit.test.ts.snap
+++ b/packages/oruga/src/components/collapse/tests/__snapshots__/collapse.unit.test.ts.snap
@@ -1,10 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OCollapse tests > render correctly 1`] = `
-"<div data-oruga="collapse" class="o-collapse o-collapse--top">
-  <div id="v-1" class="o-collapse__trigger" role="button" tabindex="0" aria-controls="v-0" aria-expanded="true"></div>
-  <transition-stub name="fade" appear="false" persisted="true" css="true">
-    <div id="v-0" class="o-collapse__content" aria-labelledby="v-1"></div>
-  </transition-stub>
-</div>"
+"<details data-oruga="collapse" class="o-collapse o-collapse--bottom">
+  <summary id="v-1" role="button" tabindex="0" class="o-collapse__trigger" aria-controls="v-0" aria-expanded="false">Trigger Button</summary>
+  <div id="v-0" class="o-collapse__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
+</details>"
 `;
diff --git a/packages/oruga/src/components/collapse/tests/collapse.axe.test.ts b/packages/oruga/src/components/collapse/tests/collapse.axe.test.ts
new file mode 100644
index 000000000..971ae1569
--- /dev/null
+++ b/packages/oruga/src/components/collapse/tests/collapse.axe.test.ts
@@ -0,0 +1,56 @@
+import { describe, test, expect, afterEach } from "vitest";
+import { enableAutoUnmount, mount } from "@vue/test-utils";
+import { axe } from "jest-axe";
+import { nextTick } from "vue";
+
+import OCollapse from "../Collapse.vue";
+import type { CollapseProps } from "../props";
+
+describe("OCollapse axe test", () => {
+    enableAutoUnmount(afterEach);
+
+    const a11yCases: { title: string; props?: CollapseProps }[] = [
+        {
+            title: "axe collapse - base case",
+        },
+        {
+            title: "axe collapse - open case",
+            props: {
+                open: true,
+            },
+        },
+        {
+            title: "axe collapse - name case",
+            props: {
+                name: "some-collapse",
+            },
+        },
+        {
+            title: "axe collapse - expanded case",
+            props: {
+                expanded: true,
+            },
+        },
+        {
+            title: "axe collapse - position case",
+            props: {
+                position: "top",
+            },
+        },
+    ];
+
+    test.each(a11yCases)("$title", async ({ props }) => {
+        const wrapper = mount(OCollapse, {
+            props: { open: false, ...props },
+            slots: {
+                trigger: "<div>Trigger Button</div>",
+                default:
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            },
+            attachTo: document.body,
+        });
+        await nextTick(); // await all content got rendered
+
+        expect(await axe(wrapper.element)).toHaveNoViolations();
+    });
+});
diff --git a/packages/oruga/src/components/collapse/tests/collapse.browser.test.ts b/packages/oruga/src/components/collapse/tests/collapse.browser.test.ts
index 1bc2eb442..c4d8b3a7a 100644
--- a/packages/oruga/src/components/collapse/tests/collapse.browser.test.ts
+++ b/packages/oruga/src/components/collapse/tests/collapse.browser.test.ts
@@ -1,54 +1,46 @@
 import { describe, expect, test } from "vitest";
 import { render } from "vitest-browser-vue";
 
-import { defineComponent, h, ref } from "vue";
+import { defineComponent, h, type VNode } from "vue";
 
 import OCollapse from "../Collapse.vue";
 
-const SimpleCollapse = defineComponent({
-    name: "SimpleCollapse",
-    setup() {
-        const isOpen = ref(0);
-        const collapses = [
-            {
-                title: "Title 1",
-                text: "Text 1",
-                index: 0,
-            },
-            {
-                title: "Title 2",
-                text: "Text 2",
-                index: 1,
-            },
-            {
-                title: "Title 3",
-                text: "Text 3",
-                index: 2,
-            },
-        ];
-        return { isOpen, collapses };
+const collapses = [
+    {
+        title: "Title 1",
+        text: "Text 1",
+        index: 0,
     },
-    render() {
-        return h(
+    {
+        title: "Title 2",
+        text: "Text 2",
+        index: 1,
+    },
+    {
+        title: "Title 3",
+        text: "Text 3",
+        index: 2,
+    },
+];
+
+const SimpleCollapse = defineComponent(() => {
+    return (): VNode =>
+        h(
             "section",
             {},
-            this.collapses.map(({ title, text, index }) =>
+            collapses.map(({ title, text, index }) =>
                 h(
                     OCollapse,
                     {
                         key: index,
                         "data-testid": `collapse-${index}`,
-                        open: this.isOpen == index,
-                        onOpen: () => {
-                            this.isOpen = index;
-                        },
+                        name: "browser-test-collapsables",
+                        open: index === 0,
                     },
                     {
                         trigger: ({ open }) =>
-                            h("div", {}, [
-                                h("p", {}, [
-                                    `${title} (${open ? "Open" : "Closed"})`,
-                                ]),
+                            h("p", { "data-testid": `trigger-${index}` }, [
+                                `${title} (${open ? "Open" : "Closed"})`,
                             ]),
                         default: () =>
                             h("div", { "data-testid": `content-${index}` }, [
@@ -58,7 +50,6 @@ const SimpleCollapse = defineComponent({
                 ),
             ),
         );
-    },
 });
 
 describe("<Collapse>", () => {
@@ -69,7 +60,7 @@ describe("<Collapse>", () => {
         const secondContent = screen.getByTestId("content-1");
         await expect.element(secondContent).not.toBeVisible();
         const second = screen.getByTestId("collapse-1");
-        const trigger = second.getByRole("button");
+        const trigger = second.getByTestId("trigger-1");
         await trigger.click();
         await expect.element(firstContent).not.toBeVisible();
         await expect.element(secondContent).toBeVisible();
diff --git a/packages/oruga/src/components/collapse/tests/collapse.unit.test.ts b/packages/oruga/src/components/collapse/tests/collapse.unit.test.ts
index 7c8a339c2..7ec004a54 100644
--- a/packages/oruga/src/components/collapse/tests/collapse.unit.test.ts
+++ b/packages/oruga/src/components/collapse/tests/collapse.unit.test.ts
@@ -2,15 +2,64 @@ import { describe, test, expect, afterEach } from "vitest";
 import { enableAutoUnmount, mount } from "@vue/test-utils";
 
 import OCollapse from "@/components/collapse/Collapse.vue";
+import { setTimeout } from "timers/promises";
 
 describe("OCollapse tests", () => {
     enableAutoUnmount(afterEach);
 
     test("render correctly", () => {
-        const wrapper = mount(OCollapse);
+        const wrapper = mount(OCollapse, {
+            props: { label: "Trigger Button" },
+            slots: {
+                default:
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            },
+        });
         expect(!!wrapper.vm).toBeTruthy();
         expect(wrapper.exists()).toBeTruthy();
         expect(wrapper.attributes("data-oruga")).toBe("collapse");
         expect(wrapper.html()).toMatchSnapshot();
+
+        const summary = wrapper.find("summary");
+        expect(summary.exists()).toBeTruthy();
+        expect(summary.classes("o-collapse__trigger"));
+        expect(summary.text()).toBe("Trigger Button");
+
+        const content = wrapper.find("div");
+        expect(content.exists()).toBeTruthy();
+        expect(summary.classes("o-collapse__content"));
+        expect(content.text()).toBe(
+            "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+        );
+    });
+
+    test("emit events when toggled", async () => {
+        const wrapper = mount(OCollapse, {
+            props: { open: false },
+            slots: {
+                trigger: "Trigger Button",
+                default:
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+            },
+        });
+
+        const summary = wrapper.find("summary");
+        expect(summary.exists()).toBeTruthy();
+
+        // open element
+        await summary.trigger("click");
+        await setTimeout(); // await dom handlers run
+
+        expect(wrapper.emitted("update:open")).toHaveLength(1);
+        expect(wrapper.emitted("open")).toHaveLength(1);
+        expect(wrapper.emitted("close")).toBeUndefined();
+
+        // click again to close element
+        await summary.trigger("click");
+        await setTimeout(); // await dom handlers run
+
+        expect(wrapper.emitted("update:open")).toHaveLength(2);
+        expect(wrapper.emitted("open")).toHaveLength(1);
+        expect(wrapper.emitted("close")).toHaveLength(1);
     });
 });
diff --git a/packages/oruga/src/components/dialog/tests/dialog.axe.test.ts b/packages/oruga/src/components/dialog/tests/dialog.axe.test.ts
index 7a8fcb8b1..5b4f9e685 100644
--- a/packages/oruga/src/components/dialog/tests/dialog.axe.test.ts
+++ b/packages/oruga/src/components/dialog/tests/dialog.axe.test.ts
@@ -22,7 +22,7 @@ describe("ODialog axe test", () => {
             },
         },
         {
-            title: "axe dialog - modal case case",
+            title: "axe dialog - modal case",
             props: {
                 backdrop: true,
                 title: "Adcanced Title",
diff --git a/packages/oruga/src/config.d.ts b/packages/oruga/src/config.d.ts
index f196ecce0..35a3c6f1c 100644
--- a/packages/oruga/src/config.d.ts
+++ b/packages/oruga/src/config.d.ts
@@ -503,10 +503,6 @@ In addition, any CSS selector string or an actual DOM node can be used.
             }>;
         collapse?: ComponentConfigBase &
             Partial<{
-                /**
-                 * Custom animation (transition name)
-                 */
-                animation: string;
                 /**
                  * Trigger position
                  */