title: Angular Material expansion panel : Multiple expand
body: <p>I'm working on a compare view with expansion panels of Angular Material.</p>
  
  <p>It's dynamically rendered depending on how many dogs/parts I'm comparing, setting columns in a mat-grid-list who contains parts that can be compared, as expansion panels.</p>
  
  <pre><code>&lt;h2 class="dogs-comparison--header"&gt;dogs Comparison&lt;/h2&gt;
  &lt;mat-grid-list [cols]="dogs.length" rowHeight="20:1" *ngIf="!isLoading"&gt;
    &lt;mat-grid-tile *ngFor="let dog of dogs" colspan="1" rowspan="2" layout="layout-fill"&gt;
      &lt;mat-grid-tile-header class="column-header"&gt;
        {{dog['title']}}
      &lt;/mat-grid-tile-header&gt;
      &lt;mat-accordion multi="true" class="dog-compare--dog_parts"&gt;
        &lt;mat-expansion-panel *ngFor="let part of dog['parts']" [expanded]="part.isExpanded"&gt;
          &lt;mat-expansion-panel-header&gt;
            &lt;mat-panel-title&gt;
              {{ part.partTitle}}
            &lt;/mat-panel-title&gt;
          &lt;/mat-expansion-panel-header&gt;
          &lt;p *ngFor="let item of part['items']"&gt;
            {{item.itemTitle}}: &lt;span&gt;{{item.itemValue}}&lt;/span&gt;
          &lt;/p&gt;
        &lt;/mat-expansion-panel&gt;
      &lt;/mat-accordion&gt;
    &lt;/mat-grid-tile&gt;
  &lt;/mat-grid-list&gt;
  </code></pre>
  
  <p>My question is : is there any way that I could, when clicking one of the parts as expansion panel in one column, open the adjacent column's expansion panels. So let's say Dog has a part called Anatomy, I compare Dog1, Dog2 and Dog3, If I toggle Dog1 Anatomy expansion panel, the two others would toggle as well ?</p>
  
  <p>I'm struggling a bit, checking on how I can have dynamic/similar IDs but I'm stuck on the question for now.</p>
  
  <p>Thank you for the help</p>