diff --git a/src/components/accordion/VAccordionChild.vue b/src/components/accordion/VAccordionChild.vue
new file mode 100644
index 0000000..a214ba0
--- /dev/null
+++ b/src/components/accordion/VAccordionChild.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import AccordionPanel from 'primevue/accordionpanel';
+import AccordionHeader from 'primevue/accordionheader';
+import AccordionContent from 'primevue/accordioncontent';
+import type IVAccordion from './IVAccordion.type';
+import { useId } from 'vue';
+
+const props = withDefaults(defineProps<IVAccordion>(), {
+  id: () => useId(),
+  disabled: false,
+})
+</script>
+
+<template>
+  <AccordionPanel :id="props.id" :value="panelValue" :disabled="props.disabled" :class="['p-accordionpanel', {'disabled': props.disabled}]">
+    <AccordionHeader class="p-accordionheader">
+      <slot name="header"></slot>
+    </AccordionHeader>
+    <AccordionContent class="p-accordioncontent">
+      <slot name="content"></slot>
+    </AccordionContent>
+  </AccordionPanel>
+</template>
+
+<style lang="css" scoped>
+.p-accordionpanel.disabled {
+  /* header */
+  --p-accordion-header-color: var(--text-disabled-grey);
+  --p-accordion-header-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-active-color: var(--text-disabled-grey);
+  --p-accordion-header-active-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-border-color: var(--border-disabled-grey);
+  --p-accordion-content-border-color: var(--border-disabled-grey);
+  /* focus header */
+  --p-accordion-header-focus-ring-style: none;
+  --p-accordion-header-focus-ring-color: transparent;
+  --p-accordion-header-focus-ring-width: 0px;
+  /* background header */
+  --p-accordion-header-border-color: var(--border-default-grey);
+  --p-accordion-header-background: var(--background-disabled-grey);
+  --p-accordion-header-hover-background: var(--background-disabled-grey);
+  --p-accordion-header-active-background: var(--background-disabled-grey);
+  --p-accordion-header-active-hover-background: var(--background-disabled-grey);
+  /* icon */
+  --p-accordion-header-toggle-icon-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-hover-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-active-color: var(--text-disabled-grey);
+  --p-accordion-header-toggle-icon-active-hover-color: var(--text-disabled-grey);
+}
+
+.p-accordionheader{
+  border-left: none;
+  border-right: none;
+}
+
+.p-accordioncontent{margin: 1rem;}
+</style>