Controlling the Accordion Item Selection

[Jonas Czeslik]

Hello Syncfusion team, 

I am currently facing an issue with the Accordion Item selection. I prepared a stackblitz with the problem description:

https://stackblitz.com/edit/ej2-accordion-syncfusion-angular-vrqqsg?file=app.component.ts

In short: How can I gain control over which accordion item is initially selected? And can you explain a few selection details (font color vs background color and why they are not set synchronously)?

Thanks in regard

Jonas!

[Swathi Ravi]

Hi Jonas,

 

The select method in Accordion is only used to focus on the specified index item header. If you want to expand/collapse an item in Accordion, you can use the expanditem method.

 

Api: https://ej2.syncfusion.com/documentation/api/accordion/#expanditem

Q.  How can I gain control over which accordion item is initially selected?

 Please share the use case scenario of your requirement or more details about your requirement.

 

Regards,

Swathi Ravi

[Jonas Czeslik]

The use-case scenario is that I have a dynamically created accordion and by default it seems that the last open accordion is highlighted (in my above stackblitz: purple font).

This purple font is the result of accordion header texts that have the classes e-select and e-expand-state.

I want to be able to overwrite this default behaviour and 

a) initially unmark all accordion items (nothing should be selected / highlighted) or

b) If a is not possible, mark only the first accordion as selected

[Jonas Czeslik]

Okay, I guess I found a solution for a)

I recognized that there are three initial states of accordion items based on different classes.

1) The accordion items that are not highlighted and collapsed​. Besides e-acrdn-item they only have the class e-select

2) The accordion items that are not highlighted and expanded. They also have the classes e-selected and e-active. 

3) The accordion items that are highlighted and expanded. They have the same classes as 2) plus e-expand-state. 

So I thought - to achieve my requirement, I just have to downgrade accordion items from category 3) to category 2). 

Therefore, I waited for the expanding - event of the accordion (to make sure that the data is already loaded) and - only during the first event - removed the class "e-expand-state", which works fine.

if(this.initialExpansion === true){

this.initialExpansion = false;

   this.acc.element.querySelectorAll('.e-acrdn-item').forEach((element) => element.classList.remove('e-expand-state'));

}

[Swathi Ravi]

a) initially unmark all accordion items (nothing should be selected / highlighted)

You can achieve this requirement by removing the expanded property from all accordion items.

Sample: https://stackblitz.com/edit/ej2-accordion-syncfusion-angular-zkfrxt?file=app.component.html

[app.component.html]

<ejs-accordion #acc>

  <e-accordionitems>

    <!-- Remove the highlighted property from all accordion items -->

    <e-accordionitem expanded="true">

      <ng-template #header>

        <div>Test</div>

      </ng-template>

      <ng-template #content>

        <div>test</div>

      </ng-template>

    </e-accordionitem>

  </e-accordionitems>

</ejs-accordion>

b) If a is not possible, mark only the first accordion as selected

You can mark only the first accordion as selected by using expanded property of Accordion item or expandedIndices property of Accordion as show in the below snippet.

Api's: https://ej2.syncfusion.com/angular/documentation/api/accordion#expandedindices

https://ej2.syncfusion.com/angular/documentation/api/accordion/accordionItem/#expanded

Using expandedIndices:

Sample: https://stackblitz.com/edit/ej2-accordion-syncfusion-angular-jqnjkp?file=app.component.html,app.component.ts

[app.component.html]

<ejs-accordion #acc [expandedIndices]="index"> </ejs-accordion>

[app.component.ts]

export class AppComponent {

  public index: number[] = [0];

 }

Using expanded:

Sample: https://stackblitz.com/edit/ej2-accordion-syncfusion-angular-sjfk2e?file=app.component.html,app.component.ts

[app.component.html]

<e-accordionitem expanded=true>

[Jonas Czeslik]

a) does work, but only with limitations that I dont want ( I would have to make sure that all of the accordions have to be closed)

But I would like that to be dependent on the accordion config. So I want to allow accordions with any desired amount of open and closed accrodion items and still have an initial accordion, where nothing is especially highlighted. 

I dont think that this default behaviour (marking an untouched accordion item somewhere in a list of accordion items) is pretty intuitive. 

But removing all of the "e-expand-state" classes does the trick, although it is probably not the most elegant solution possible.

[Swathi Ravi]

If our provided solution does not work for your requirement, we suggest you use your workaround to achieve your requirement.