2 accordion A and B need accordion A first category to also open accordion B first category and viceversa

user_15210976 0
Viewed 40

Hello this is my first question, english is not my native language so sorry if I make some mistake.

I'm using Angular 6, jQuery and BS for my project.

I have two accordions with different categories each. Let's name them A1 and A2.

When i click A1 i want A2 to also open/close, same when i click A2. Is there any way ?

I tried jQuery for this but I get an endless loop

$('.A1').on('click', async function() {
        await $(".A2").click();
    });

$('.A2').on('click', async function() {
        await $(".A1").click();
    });

Picture

Thanks in advance to anyone who can answer this

bootstrap-4 angular html jquery
1 Answers

You can do this by calling the toggle method on the expansion panel of the accordion. Give each of your expansion panel an id and call toggle on it.

Here is the Working Demo

<mat-accordion >
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
  <mat-expansion-panel hideToggle #first (click)="second.toggle()">
<!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
       This is the first Expansion panel
      </mat-panel-title>
      <mat-panel-description>
        First Content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p>First Content</p>
  </mat-expansion-panel>
<!-- #enddocregion basic-panel -->
 
</mat-accordion>
<br/>

<mat-accordion>
<!-- #docregion basic-panel -->
<!-- #docregion hide-toggle -->
  <mat-expansion-panel #second hideToggle (click)="first.toggle()"> 
<!-- #enddocregion hide-toggle -->
    <mat-expansion-panel-header>
      <mat-panel-title>
       This is the second Expansion panel
      </mat-panel-title>
      <mat-panel-description>
        Second Content
      </mat-panel-description>
    </mat-expansion-panel-header>
    <p> Second Content</p>
  </mat-expansion-panel>
<!-- #enddocregion basic-panel -->
 
</mat-accordion>
user_33776610
Related