Inner Accordion Closes When Outer Accordion is Toggled in Angular with PrimeNG - Stack Overflow

admin管理员组

文章数量:1334672

I am working with Angular and PrimeNG and have a nested accordion, with one accordion inside another. The issue is that when I open the inner accordion and leave it open, and then open and close the outer accordion, the inner accordion closes very quickly, almost like a "flash," and does not stay open. I have set the outer accordion to start with the first tab open (`[activeIndex]="0"`), and the inner accordion also has an active tab. However, when I click on the outer accordion and close it, then open it again, the inner accordion closes again. How can I prevent this behavior and keep the inner accordion open when the outer accordion is opened again? Here is my code:

<p-accordion [activeIndex]="0">
  <p-accordionTab header="Header I">
    <div>
      <p-accordion [activeIndex]="0">
        <p-accordionTab header="Header I">
          <p>111</p>
          <p-accordion [activeIndex]="0">
            <p-accordionTab header="Header I">
              <p>222</p>
            </p-accordionTab>
          </p-accordion>
        </p-accordionTab>
      </p-accordion>
    </div>
  </p-accordionTab>
</p-accordion>

I am working with Angular and PrimeNG and have a nested accordion, with one accordion inside another. The issue is that when I open the inner accordion and leave it open, and then open and close the outer accordion, the inner accordion closes very quickly, almost like a "flash," and does not stay open. I have set the outer accordion to start with the first tab open (`[activeIndex]="0"`), and the inner accordion also has an active tab. However, when I click on the outer accordion and close it, then open it again, the inner accordion closes again. How can I prevent this behavior and keep the inner accordion open when the outer accordion is opened again? Here is my code:

<p-accordion [activeIndex]="0">
  <p-accordionTab header="Header I">
    <div>
      <p-accordion [activeIndex]="0">
        <p-accordionTab header="Header I">
          <p>111</p>
          <p-accordion [activeIndex]="0">
            <p-accordionTab header="Header I">
              <p>222</p>
            </p-accordionTab>
          </p-accordion>
        </p-accordionTab>
      </p-accordion>
    </div>
  </p-accordionTab>
</p-accordion>

• angular
• primeng
• accordion

Share Improve this question Follow asked Nov 20, 2024 at 7:55 ישראל גוטליבישראל גוטליב 1122 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Try to handle the state based on the last activity, so you can reopen the accordion.

Use the onOpen event to manage the activeIndexChange and handle the last active state.

本文标签： Inner Accordion Closes When Outer Accordion is Toggled in Angular with PrimeNGStack Overflow