diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index 41d1449400..fd65ffcd3e 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Prop, State, h } from '@stencil/core';
+import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { chevronDown } from 'ionicons/icons';
 
 import { config } from '../../global/config';
@@ -56,6 +56,10 @@ export class Accordion implements ComponentInterface {
    * value.
    */
   @Prop() value = `ion-accordion-${accordionIds++}`;
+  @Watch('value')
+  valueChanged() {
+    this.updateState();
+  }
 
   /**
    * If `true`, the accordion cannot be interacted with.
diff --git a/core/src/components/accordion/test/accordion.spec.ts b/core/src/components/accordion/test/accordion.spec.ts
index 56c5162d93..8f4b7b9141 100644
--- a/core/src/components/accordion/test/accordion.spec.ts
+++ b/core/src/components/accordion/test/accordion.spec.ts
@@ -4,7 +4,7 @@ import { AccordionGroup } from '../../accordion-group/accordion-group.tsx';
 import { Item } from '../../item/item.tsx';
 import { Accordion } from '../accordion.tsx';
 
-it('should open correct accordions', async () => {
+it('should open correct accordions when accordion group value is set', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],
     html: `
@@ -40,6 +40,42 @@ it('should open correct accordions', async () => {
   expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
 });
 
+it('should open correct accordions when accordion value is set', async () => {
+  const page = await newSpecPage({
+    components: [Item, Accordion, AccordionGroup],
+    html: `
+      <ion-accordion-group animated="false" value="first">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="second">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+        <ion-accordion value="third">
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+  });
+
+  const accordionGroup = page.body.querySelector('ion-accordion-group');
+  const accordions = accordionGroup.querySelectorAll('ion-accordion');
+
+  accordions.forEach((accordion) => {
+    expect(accordion.classList.contains('accordion-collapsed')).toEqual(true);
+  });
+
+  accordions[0].value = 'first';
+  await page.waitForChanges();
+
+  expect(accordions[0].classList.contains('accordion-collapsed')).toEqual(false);
+  expect(accordions[1].classList.contains('accordion-collapsed')).toEqual(true);
+  expect(accordions[2].classList.contains('accordion-collapsed')).toEqual(true);
+});
+
 it('should open more than one accordion when multiple="true"', async () => {
   const page = await newSpecPage({
     components: [Item, Accordion, AccordionGroup],