CODEWITHSUNDEEP
htmlangularprimeng
bonkhead128
bonkhead128

Reputation: 51

PrimeNG Accordion expand all/collapse all

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; } }

Upvotes: 2

Views: 6403

Answers (1)

skouch2022
skouch2022

Reputation: 1161

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;
  }
}

Upvotes: 5

Related Questions