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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular2 Accordion: how to programmatically expand/collapse

Thread ID:

Created:

Updated:

Platform:

Replies:

131164 Jun 26,2017 02:51 AM Jun 29,2017 11:54 PM Angular 3
loading
Tags: ejAccordion
Holger Erne
Asked On June 26, 2017 02:51 AM

Hi,

i could not find any way to programmatically expand/collapse the panels of the Accordion control at runtime. I am aware of the selectedItems property, but this only seems to set the initial state of the panels, but does not do two-way data-binding at runtime (it is neither updated with the current state of the panels, not does the visible state change when changing the selectedItems property through code)...

Here is what I tried:

  <ej-accordion enableMultipleOpen="true" [(selectedItems)]="selecteditems">
    <h3>
        <a rel='nofollow' href="#">Panel 1</a>
    </h3>
    <div>
       Panel 1 Text
</div> <h3> <a rel='nofollow' href="#">Panel 2</a> </h3> <div> Panel 2 Text </div> <h3> <a rel='nofollow' href="#">Panel 3</a> </h3> <div> Panel 3 Text </div> </ej-accordion>
<input type="button" ej-button id="button" [value]="Button" (click)="doClick()"/>
And for the Javascript side:

import {Component} from '@angular/core';

@Component({
     selector: 'sd-home',
     templateUrl: 'app/components/accordion/accordion.component.html'
})
export class AccordionComponent {
	 
     selecteditems: number[];
     constructor()
     {
       this.selecteditems = [0,1,2];
     }
doClick()
{
// collapse all but the first
this.selecteditems = [0]; }
 }
Can you please help here or provide a sample?

Thanks and best regards!


Keerthana Rajendran [Syncfusion]
Replied On June 27, 2017 03:26 AM

Hi Enre,   
   
Thank you for contacting Syncfusion support.   
   
We have prepared a sample using your code. Sample works fine and on button click all accordion items are collapsed, only the first item is expanded. We have attached a video for your reference. Please refer the below given link   
   
   
We have attached sample for your reference. Kindly refer to the below link    
   
   
If the issue persists, kindly modify the above sample to reproduce the issue at our end along with the product version which you are using so that we will analyze and provide better solution at the earliest.   
          
Regards,   
Keerthana.  
 


Holger Erne
Replied On June 29, 2017 12:28 PM

Hi Keerthana,

sorry, everything works - it seems like this simply was a typo in my original sources. The minimized version I presented here to ask the question did not contain this error, so sorry again.

Best regards!


Keerthana Rajendran [Syncfusion]
Replied On June 29, 2017 11:54 PM

Hi Enre,    
 
Thanks for the update. We are glad to hear that your issue has been resolved. Please get back to us if you require further assistance on this. We will be happy to assist you 
 
Regards, 
Keerthana 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;