diff --git a/src/components/Accordion/MucAccordion.stories.ts b/src/components/Accordion/MucAccordion.stories.ts
new file mode 100644
index 00000000..9af45c8f
--- /dev/null
+++ b/src/components/Accordion/MucAccordion.stories.ts
@@ -0,0 +1,161 @@
+import MucAccordion from "./MucAccordion.vue";
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export default {
+  components: { MucAccordion },
+  component: MucAccordion,
+  title: "Accordion/MucAccordion",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly these values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For example:
+        <template v-slot:default="{onOpen, onClose, activeItems}">
+      <MucAccordionItem
+          id="accordion-item-1"
+          header="Accordion item 1"
+          :active-items="activeItems"
+          @open="onOpen"
+          @close="onClose"
+      >
+        <template #text>
+          Text of   Accordion item 1
+        </template>
+      </MucAccordionItem>
+      <MucAccordionItem
+      id="accordion-item-2"
+      header="Accordion item 2"
+      :active-items="activeItems"
+      @open="onOpen"
+      @close="onClose"
+      >
+        <template #text>
+          Text of   Accordion item 2
+        </template>
+      </MucAccordionItem>
+    </template>
+        
+             
+
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucAccordion, MucAccordionItem },
+  template: `
+    <MucAccordion
+        id="accordion"
+        header="Lorem ipsum dolor"
+        defaultItem="accordion-item-1"
+    >
+      <template v-slot:default="{onOpen, onClose, activeItems}">
+        <MucAccordionItem
+            id="accordion-item-1"
+            header="Accordion item 1"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 1
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-2"
+            header="Accordion item 2"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 2
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-3"
+            header="Accordion item 3"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 3
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-4"
+            header="Accordion item 4"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 4
+          </template>
+        </MucAccordionItem>
+      </template>
+    </MucAccordion>
+    `,
+});
+
+export const Multiple = () => ({
+  components: { MucAccordion, MucAccordionItem },
+  template: `
+    <MucAccordion
+        id="accordion"
+        header="Lorem ipsum dolor"
+        multiple
+    >
+      <template v-slot:default="{onOpen, onClose, activeItems}">
+        <MucAccordionItem
+            id="accordion-item-1"
+            header="Accordion item 1"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 1
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-2"
+            header="Accordion item 2"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 2
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-3"
+            header="Accordion item 3"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 3
+          </template>
+        </MucAccordionItem>
+        <MucAccordionItem
+            id="accordion-item-4"
+            header="Accordion item 4"
+            :active-items="activeItems"
+            @open="onOpen"
+            @close="onClose"
+        >
+          <template #text>
+            Text of   Accordion item 4
+          </template>
+        </MucAccordionItem>
+      </template>
+    </MucAccordion>
+    `,
+});
diff --git a/src/components/Accordion/MucAccordion.vue b/src/components/Accordion/MucAccordion.vue
new file mode 100644
index 00000000..c0d02c00
--- /dev/null
+++ b/src/components/Accordion/MucAccordion.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="m-component m-component-accordion">
+    <div class="container">
+      <div class="m-component__grid">
+        <div class="m-component__column">
+          <div
+            v-if="header"
+            class="m-component__head"
+          >
+            <h2 class="m-component__heading">{{ header }}</h2>
+            <p class="m-component__summary"></p>
+          </div>
+          <div class="m-component__body">
+            <div
+              class="m-accordion"
+              :id="id"
+            >
+              <slot
+                name="default"
+                :active-items="activeItems"
+                :on-open="onOpen"
+                :on-close="onClose"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const {
+  header,
+  multiple = false,
+  defaultItem = undefined,
+} = defineProps<{
+  /**
+   * Id of accordion
+   */
+  id: string;
+  /**
+   * Heading of accordion
+   */
+  header?: string;
+  /**
+   * Multiple MucAccordionItems can be active at the same time
+   */
+  multiple?: boolean;
+  /**
+   * Id of default active item
+   */
+  defaultItem?: string;
+}>();
+
+defineSlots<{
+  /**
+   * MucAccordionItems can be put into this slot.
+   */
+  default(): unknown;
+}>();
+
+/**
+ * List of active MucAccordionItems
+ */
+const activeItems = ref<string[]>(defaultItem ? [defaultItem] : []);
+
+/**
+ * On open set as active Item
+ */
+const onOpen = (id: string) => {
+  if (multiple) {
+    activeItems.value.push(id);
+  } else {
+    activeItems.value = [id];
+  }
+};
+
+/**
+ * On close delete from active Items
+ */
+const onClose = (id: string) => {
+  activeItems.value = activeItems.value.filter((item) => item !== id);
+};
+</script>
diff --git a/src/components/Accordion/MucAccordionItem.stories.ts b/src/components/Accordion/MucAccordionItem.stories.ts
new file mode 100644
index 00000000..f052bf8e
--- /dev/null
+++ b/src/components/Accordion/MucAccordionItem.stories.ts
@@ -0,0 +1,37 @@
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export default {
+  components: { MucAccordionItem },
+  component: MucAccordionItem,
+  title: "Accordion/MucAccordionItem",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `The \`muc-accordion-item\` component represents an item of an \`muc-accordion\` <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\`
+             
+[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
+`,
+      },
+    },
+  },
+};
+
+export const Template = () => ({
+  components: { MucAccordionItem },
+  template: `
+
+    <MucAccordionItem
+        id="accordion-item-1"
+        header="Accordion item 1"
+        :active-items="activeItems"
+        @open="onOpen"
+        @close="onClose"
+    >
+      <template #text>
+        Text of   Accordion item 1
+      </template>
+    </MucAccordionItem>
+
+  `,
+});
diff --git a/src/components/Accordion/MucAccordionItem.vue b/src/components/Accordion/MucAccordionItem.vue
new file mode 100644
index 00000000..11f46ae1
--- /dev/null
+++ b/src/components/Accordion/MucAccordionItem.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="m-accordion__section">
+    <h3
+      class="m-accordion__section-header"
+      :id="'heading-' + id"
+    >
+      <button
+        @click="toggleCollapsable"
+        class="m-accordion__section-button"
+        :class="{ collapsed: collapsed }"
+        type="button"
+        :aria-expanded="!collapsed"
+        :aria-controls="'content-' + id"
+      >
+        {{ header }}
+
+        <muc-icon
+          v-if="collapsed"
+          icon="chevron-down"
+        />
+        <muc-icon
+          v-else
+          icon="chevron-up"
+        />
+      </button>
+    </h3>
+    <section
+      ref="section"
+      :id="'content-' + id"
+      class="m-accordion__section-content"
+      :class="{
+        collapse: !collapsing,
+        collapsing: collapsing,
+        show: !collapsed,
+      }"
+      :aria-labelledby="'heading-' + id"
+    >
+      <div class="m-textplus__content m-content">
+        <p>
+          <slot name="text" />
+        </p>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+
+import { MucIcon } from "../Icon";
+
+const { id, activeItems = [] } = defineProps<{
+  /**
+   * Id of accordion item.
+   */
+  id: string;
+  /**
+   * Heading of accordion item.
+   */
+  header: string;
+
+  /**
+   * List of active accordion items.
+   */
+  activeItems?: string[];
+}>();
+
+defineSlots<{
+  /**
+   * Formatted text can be put into this slot.
+   */
+  text(): unknown;
+}>();
+
+const emit = defineEmits<{
+  /**
+   * Event emitted to show content of the accordion item.
+   */
+  open: [id: string];
+
+  /**
+   * Event emitted to hide content of the accordion item.
+   */
+  close: [id: string];
+}>();
+
+/**
+ * HTMLElement of section.
+ */
+const section = ref<HTMLElement>();
+
+/**
+ * Displays accordion item content.
+ */
+const collapsed = ref<boolean>(true);
+
+/**
+ * Accordion item is collapsing.
+ */
+const collapsing = ref<boolean>(false);
+
+watch(
+  () => activeItems,
+  () => {
+    if (!activeItems.includes(id) && !collapsed.value && section.value) {
+      collapsed.value = true;
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
+      collapsing.value = true;
+      setTimeout(() => {
+        if (section.value) {
+          section.value.style.height = "0";
+        }
+      }, 0);
+    }
+  }
+);
+
+/**
+ * Toggles the collapsed state of the accordion item content.
+ */
+const toggleCollapsable = () => {
+  if (section.value) {
+    collapsed.value = !collapsed.value;
+    if (collapsed.value) {
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
+      collapsing.value = true;
+      emit("close", id);
+      setTimeout(() => {
+        if (section.value) {
+          section.value.style.height = "0";
+        }
+      }, 0);
+    } else {
+      section.value.style.height = "0";
+      collapsing.value = true;
+      emit("open", id);
+      setTimeout(() => {
+        if (section.value) {
+          section.value.style.height = section.value.scrollHeight + "px";
+        }
+      }, 0);
+    }
+  }
+};
+
+/**
+ * Calculation of the margin of 1.5em to improve the animation
+ */
+const calculateMargin = () => {
+  if (section.value) {
+    const computedStyle = window.getComputedStyle(section.value);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    return 1.5 * fontSize;
+  } else {
+    return 0;
+  }
+};
+
+/**
+ * Handles the end of the collapsing transition.
+ */
+const handleTransitionEnd = () => {
+  collapsing.value = false;
+  if (section.value) {
+    section.value.style.height = "";
+  }
+};
+
+onMounted(() => {
+  if (section.value) {
+    section.value.addEventListener("transitionend", handleTransitionEnd);
+    if (activeItems.includes(id)) {
+      collapsed.value = false;
+    }
+  }
+});
+
+onBeforeUnmount(() => {
+  if (section.value) {
+    section.value.removeEventListener("transitionend", handleTransitionEnd);
+  }
+});
+</script>
diff --git a/src/components/Accordion/index.ts b/src/components/Accordion/index.ts
new file mode 100644
index 00000000..6b9f41d7
--- /dev/null
+++ b/src/components/Accordion/index.ts
@@ -0,0 +1,4 @@
+import MucAccordion from "./MucAccordion.vue";
+import MucAccordionItem from "./MucAccordionItem.vue";
+
+export { MucAccordion, MucAccordionItem };
diff --git a/src/components/index.ts b/src/components/index.ts
index 3fe021d5..d05e5a28 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,3 +1,4 @@
+import { MucAccordion, MucAccordionItem } from "./Accordion";
 import { MucBanner } from "./Banner";
 import { MucButton } from "./Button";
 import { MucCalendar } from "./Calendar";
@@ -27,6 +28,8 @@ import { MucSpinner } from "./Spinner";
 import { MucStepper } from "./Stepper";
 
 export {
+  MucAccordion,
+  MucAccordionItem,
   MucButton,
   MucBanner,
   MucIntro,