We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Controlling the Accordion Item Selection

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!


6 Replies 1 reply marked as answer

SR Swathi Ravi Syncfusion Team November 23, 2022 08:05 AM

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.

 

Apihttps://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



JC Jonas Czeslik November 23, 2022 08:18 AM

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



JC Jonas Czeslik November 23, 2022 11:49 AM

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

Marked as answer

SR Swathi Ravi Syncfusion Team November 24, 2022 05:47 AM

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 indexnumber[] = [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>



JC Jonas Czeslik November 24, 2022 06:57 AM

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.





SR Swathi Ravi Syncfusion Team November 25, 2022 08:14 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon