How to collapse/expand multiple panels in PrimeNG?

3
votes

I have multiple panels and 2 buttons. One button will expand them all and the other one will collapse them all. I'm not able to expand or collapse them. Does anyone know how to make this happen? Here's my code. Thank you in advance!

PLUNKER

 <p-panel header="Panel 1" [toggleable]="true" [style]="{'margin-bottom':'20px'}">

  The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
  His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
  Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
  kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.

</p-panel>
2
angularprimeng

2 Answers

3
votes

PrimeNG panels have a number of properties - one of these is collapsed This defaults to false but can be set to a variable, and then have a button where clicking it toggles the state of the variable:

app.component.ts

export class AppComponent {
  collapsed = false
}

app.template.html

<p-panel header="Panel 4" [toggleable]="true" [collapsed]="collapsed" [style]="{'margin-bottom':'20px'}">
Some text
</p-panel>
<!-- To toggle the state, set the button like this -->
<button (click)="collapsed = !collapsed">Toggle</button>
<!-- to have separate buttons, do this -->
<button (click)="collapsed = true">Collapse</button>
<button (click)="collapsed = false">Expand</button>

Simply bind this property to the variable the button controls on any panel you want to globally collapse.

If you also want to hide the individual collapse buttons for each pane, you can set the following style:

.ui-panel-titlebar-toggler { display:none; }

Working example forked from your plnkr.

1
votes

Following @match answer, you must indicate the collapsed property with '()', otherwise it won't work afer the first trigger.

So it would look like this:

<p-panel header="Panel 4" [toggleable]="true" [(collapsed)]="collapsed" [style]="{'margin-bottom':'20px'}">
    Some text
</p-panel>

Maybe a bit late, but just so you know.

Here is where they introduced those changes.