PrimeNG Accordion expand all/collapse all

Question

I am looking for a way to Open and Close the entire accordion with one button. Right now I'm doing it like this. Currently only the expansion works but the collapse does not for some reason. I checked and the tab.selected is getting set to False on collapse, but it won't close

openCloseAllProjectStatusTabs(requestToOpen: boolean) { if (this.projectStatusTabs.== undefined && this projectStatusTabs = null){ this.projectStatusTabs.forEach(tab => tab.selected = requestToOpen); this.expanded = requestToOpen; } }

Answer 1

I didn't test this code, but I think all you need is to give the p-accordion the multiple flag. Then all you need to do is a single isExpanded value that will control all of the tabs using the selected input.

app.component.html

<p-accordion [multiple]="true">
  <p-accordionTab header="Header 1" [selected]="isExpanded">
    <p>
      Content 1
    </p>
  </p-accordionTab>
  <p-accordionTab header="Header 2" [selected]="isExpanded">
    <p>
     content 2
    </p>
  </p-accordionTab>
  <p-accordionTab header="Header 3" [selected]="isExpanded">
    <p>
      content 3
    </p>
  </p-accordionTab>
</p-accordion>

<button (click)="isExpanded = !isExpanded">Toggle</button>

app.component.ts

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 

  private _isExpanded = false;
  
  public get isExpanded() {
    return this._isExpanded;
  }

  public set isExpanded(value: boolean) {
     this._isExpanded = value;
  }
}