Collapse and expand group of UI components

[Neo]

Hi all,

I want to implement collapse and expand feature for some group of UI components and may have to set min and max height when resizing. Refer below example,

[Balasubramanian Sattanathan]

Hi Neo, 

Greetings from Syncfusion Support. 

We have validated your reported scenario at our end and prepared sample based on that. Let you know that, we can achieve your requirement by making use of following properties expandMode and expanded like below code snippet.

 

<ejs-accordion expandMode='Multiple'> 

    <e-accordionitems> 

          <e-accordionitem expanded='true'></e-accordionitem> 

              . 

              . 

              . 

     </e-accordionitems> 

</ejs-accordion> 

Sample: https://stackblitz.com/edit/angular-d3dyra?file=app.component.html 

UG: https://ej2.syncfusion.com/angular/documentation/accordion/expand-mode/?no-cache=1#multiple 

API: https://ej2.syncfusion.com/angular/documentation/api/accordion/#expandmode 

Kindly try the above sample and let us know if you have any concerns 

Regards, 

Balasubramanian S

[Neo]

Hi Neo, 

Greetings from Syncfusion Support. 

We have validated your reported scenario at our end and prepared sample based on that. Let you know that, we can achieve your requirement by making use of following properties expandMode and expanded like below code snippet.

 

<ejs-accordion expandMode='Multiple'> 

    <e-accordionitems> 

          <e-accordionitem expanded='true'></e-accordionitem> 

              . 

              . 

              . 

     </e-accordionitems> 

</ejs-accordion> 

Sample: https://stackblitz.com/edit/angular-d3dyra?file=app.component.html 

UG: https://ej2.syncfusion.com/angular/documentation/accordion/expand-mode/?no-cache=1#multiple 

API: https://ej2.syncfusion.com/angular/documentation/api/accordion/#expandmode 

Kindly try the above sample and let us know if you have any concerns 

Regards, 

Balasubramanian S

Hi,

That's working fine. But I need to hide header section and add separate button for expand functionalities. And also I need to set max height when expanding and min height for collapse.

[Balasubramanian Sattanathan]

Hi Neo, 

 

Thanks for the update. 

We have analyzed your reported scenario and prepared a sample based on that by using below code snippets. In the below sample, if the checkbox is checked/unchecked, the corresponding accordion item will be expanded/collapsed. We can remove the header section by using below CSS. And we regret to you know that, there is no possibility to set min/max height for accordion items according to the accordion architecture. 

app.component.css: 

.e-acrdn-header-content, 

.e-toggle-icon{ 

  display: none !important; 

} 

 

app.component.ts: 

public changeHandler1(e) { 

  this.acrdnInstance.expandItem(e.checked, 0); 

} 

public changeHandler2(e) { 

  this.acrdnInstance.expandItem(e.checked, 1); 

} 

public changeHandler3(e) { 

  this.acrdnInstance.expandItem(e.checked, 2); 

} 

 

Sample: https://stackblitz.com/edit/angular-d3dyra-xbdmop?file=app.component.ts 

Regards,  

Balasubramanian S