ejAccordion

3 Aug 201824 minutes to read

The Accordion control is an interface where lists of items can be collapsed or expanded. It has several collapsible panels where only one can be expanded at a time that is useful for dashboards where space is limited. Each Accordion control has a template for its header and its content.

Example

  • HTML
    • <ej-accordion>
    <h3>
        <a href="#">Twitter</a>
    </h3>
    <div>
        Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
        Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
        Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
    </div>
    <h3>
        <a href="#">Facebook</a>
    </h3>
    <div>
        Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
    </div>
    <h3>
        <a href="#">WhatsApp</a>
    </h3>
    <div>
        WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
        As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
        WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
    </div>
</ej-accordion>

    Requires

    • module:jQuery

    • module:jquery.easing.1.3.min.js

    • module:ej.core.js

    • module:ej.accordion.js

    Members

    ajaxSettings object

    Specifies the ajaxSettings option to load the content to the accordion control.

    Default Value

    • null

    Example

  • HTML
    • <ej-accordion ajaxSettings.type="GET" [ajaxSettings.cache]=false ajaxSettings.data={} ajaxSettings.dataType="html" ajaxSettings.contentType="html" [ajaxSettings.async]=true>
    <h3>
        <a href="#">Twitter</a>
    </h3>
    <div>
        Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
        Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
        Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
    </div>
    <h3>
        <a href="#">Facebook</a>
    </h3>
    <div>
        Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
    </div>
    <h3>
        <a href="#">WhatsApp</a>
    </h3>
    <div>
        WhatsApp Messenger is a proprietary cross-platform instant messaging client for smart phones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
        As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
        WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
    </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    ajaxSettings.async boolean

    It specifies, whether to enable or disable asynchronous request.

    ajaxSettings.cache boolean

    It specifies the page will be cached in the web browser.

    ajaxSettings.contentType string

    It specifies the type of data is send in the query string.

    ajaxSettings.data Object

    It specifies the data as an object, will be passed in the query string.

    ajaxSettings.dataType string

    It specifies the type of data that you’re expecting back from the response.

    ajaxSettings.type string

    It specifies the HTTP request type.

    allowKeyboardNavigation boolean

    Accordion headers can be expanded and collapsed on keyboard action.

    Default Value

    • true

    Example

  • HTML
    • <ej-accordion id="accordion" [allowKeyboardNavigation]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    collapseSpeed number

    To set the Accordion headers Collapse Speed.

    Default Value

    • 300

    Example

  • HTML
    • <ej-accordion id="accordion" collapseSpeed=500>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    collapsible boolean

    Specifies the collapsible state of accordion control.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    cssClass string

    Sets the root CSS class for Accordion theme, which is used customize.

    Default Value

    • ””

    Example

  • HTML
    • <ej-accordion id="accordion" [cssClass]="custom">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }
  • HTML
    • <style class="cssStyles">
    .custom {
        font-style: italic;
        text-align: justify;
    }
    .custom span.e-icon {
        display: none !important;
    }
    .custom h3 {
        text-decoration: underline;
        text-align: center;
    }
</style>

    customIcon object

    Allows you to set the custom header Icon. It accepts two key values “header”, ”selectedHeader”.

    1. header - The collapsing header CSS class name.
    2. selectedHeader - The active header CSS class name.

    Default Value

    • ”{ header: “e-collapse”, selectedHeader: “e-expand” }”

    customIcon.header string

    This class name set to collapsing header.

    customIcon.selectedHeader string

    This class name set to expanded (active) header.

    Example

  • HTML
    • <ej-accordion id="accordion" customIcon.header="header-close" customIcon.selectedHeader="header-expand">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    disabledItems number[]

    Disables the specified indexed items in accordion.

    NOTE

    The disabledItems is a dependent property of enableMultipleOpen. The enableMultipleOpen property should be set as true.

    Default Value

    • []

    Example

  • HTML
    • <ej-accordion id="accordion" [disabledItems]=" disabledItems">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    disabledItems: array;
    constructor() {

 this.disabledItems=[0,1];
    }
}

    enableAnimation boolean

    Specifies the animation behavior in accordion.

    Default Value:

    • true

    Example

  • HTML
    • <ej-accordion id="accordion" [enableAnimation]=false>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    enabled boolean

    With this enabled property, you can enable or disable the Accordion.

    Default Value

    • true

    Example

  • HTML
    • <ej-accordion id="accordion" [enabled]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    enabledItems number[]

    Used to enable the disabled items in accordion.

    NOTE

    The enabledItems is a dependent property of enableMultipleOpen. The enableMultipleOpen property should be set as true.

    Default Value

    • []

    Example

  • HTML
    • <ej-accordion id="accordion" [enabledItems]="enabledItems">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    enabledItems: array;
    constructor() {
    this.enabledItems=[0,1];
    }
}

    enableMultipleOpen boolean

    Multiple content panels to activate at a time.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [enableMultipleOpen]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    enablePersistence boolean

    Save current model value to browser cookies for maintaining states. When refreshing the accordion control page, the model value is applied from browser cookies or HTML 5
    local storage.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [enablePersistence]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    enableRTL boolean

    Display headers and panel text from right-to-left.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [enableRTL]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    events string

    The events API binds the action for activating the accordion header. Users can activate the header by using mouse actions such as mouse-over, mouse-up, mouse-down, and so
    on.

    Default Value

    • “click”

    Example

  • HTML
    • <ej-accordion id="accordion" events="mouseover">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    expandSpeed number

    To set the Accordion headers Expand Speed.

    Default Value:

    • 300

    Example

  • HTML
    • <ej-accordion id="accordion" expandSpeed=500>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    headerSize number|string

    Sets the height for Accordion items header.

    Example

  • HTML
    • <ej-accordion id="accordion" headerSize="40px">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    height number|string

    Specifies height of the accordion.

    Default Value:

    • null

    Example

  • HTML
    • <ej-accordion id="accordion" height="500px">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    heightAdjustMode enum|string

    Adjusts the content panel height based on the given option (content, auto, or fill). By default, the panel heights are adjusted based on the content.

    Name Description
    Content Height fit to the content in the panel
    Auto Height set to the largest content in the panel
    Fill Height filled to the content of the panel

    Default Value

    • “content”

    Example

  • HTML
    • <ej-accordion id="accordion" [heightAdjustMode]="mode">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    mode:any;

//heightAdjustMode  for content div on initialization. 
    constructor() { 
    this.mode=ej.Accordion.HeightAdjustMode.Auto;//enum
    }
}
  • HTML
    • <ej-accordion id="accordion" [heightAdjustMode]="mode">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    mode:any;


    constructor() { 
    //Pass value on string type. 
    this.mode="auto";
    }
}

    htmlAttributes object

    It allows to define the characteristics of the Accordion control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • HTML
    • <ej-accordion id="accordion" [htmlAttributes ]="htmlAttributes" [collapsible]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {
    htmlAttributes : any;
    constructor() { 
    this.htmlAttributes = { title: "Demo" };
    }
}

    selectedItemIndex number

    The given index header will activate (open). If collapsible is set to true, and a negative value is given, then all headers are collapsed. Otherwise, the first panel is
    activated.

    Default Value

    • 0

    Example

  • HTML
    • <ej-accordion id="accordion" selectedItemIndex=1>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    selectedItems number[]

    Activate the specified indexed items of the accordion

    NOTE

    The selectedItems is a dependent property of enableMultipleOpen. The enableMultipleOpen property should be set as true.

    Default Value

    • [0]

    Example

  • HTML
    • <ej-accordion id="accordion" [enableMultipleOpen]=true [selectedItems]="selectedItems">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    selectedItems: array;
    constructor() {

 this.selectedItems=[0,1];
    }
}

    showCloseButton boolean

    Used to determines the close button visibility an each accordion items. This close button helps to remove the accordion item from the control.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [showCloseButton]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    showRoundedCorner boolean

    Displays rounded corner borders on the Accordion control’s panels and headers.

    Default Value

    • false

    Example

  • HTML
    • <ej-accordion id="accordion" [showRoundedCorner]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    width number|string

    Specifies width of the accordion.

    Default Value:

    • null

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true>
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { }

    Methods

    addItem(header_name, content, index, isAjaxReq)

    AddItem method is used to add the panel in dynamically. It receives the following parameters

    Name Type Description
    header_name string specify the name of the header
    content string content of the new panel
    index number insertion place of the new panel
    isAjaxReq boolean Enable or disable the AJAX request to the added panel

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.addItem("New item", "The accordion content", 2);

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("addItem", "New Item", "The accordion content", 2);

}
}

    collapseAll()

    This method used to collapse the all the expanded items in accordion at a time.

    NOTE

    Before we call this method, we must set “collapsible” is true. Then only collapseAll method will working.

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.collapseAll();

}
}
  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("collapseAll");

}
}

    collapsePanel()

    This method used to Collapses the specified items in accordion at a time.

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.collapsePanel(0);

}
}
  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("collapsePanel",0);

}
}

    destroy()

    destroy the Accordion widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.

    Example

  • HTML
    • <ej-accordion id="accordion">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>

<button type="button" (click)="onClick()">DESTROY</button>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
onClick() {

  var Object = $("#accordion").data("ejAccordion");
      Object.destroy();

}
}
  • HTML
    • <ej-accordion id="accordion">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>

<button type="button" (click)="onClick()">DESTROY</button>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
onClick() {

  $("#accordion").ejAccordion("destroy");

}
}

    disable()

    Disables the accordion widget includes all the headers and content panels.

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.disable();

}
}
  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("disable");

}
}

    disableItems(index)

    Disable the accordion widget item based on specified header index.

    Name Type Description
    index array index values to disable the panels

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.disableItems([1]);

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("disableItems", [1]);

}
}

    enable()

    Enable the accordion widget includes all the headers and content panels.

    Example

  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.enable();

}
}
  • HTML
    • <ej-accordion id="accordion" [collapsible]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("enable");

}
}

    enableItems(index)

    Enable the accordion widget item based on specified header index.

    Name Type Description
    index array index values to enable the panels

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.disableItems([0]);
      Object.disableItems([1]);
      Object.enableItems([1]);

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {
      $("#accordion").ejAccordion("disableItems", [0]); 

  $("#accordion").ejAccordion("disableItems", [1]); 

  $("#accordion").ejAccordion("enableItems", [1]);

}
}

    expandAll()

    To expand all the accordion widget items.

    NOTE

    Before we call this method, we must set “enableMultipleOpen” is true. Then only expandAll method will working.

    Example

  • HTML
    • <ej-accordion id="accordion" [enableMultipleOpen]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.expandAll();

}
}
  • HTML
    • <ej-accordion id="accordion" [enableMultipleOpen]=true (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("expandAll");

}
}

    expandPanel()

    This method used to Expand the specified items in accordion at a time.

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.expandPanel(1);

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("expandPanel",1);

}
}

    getItemsCount()

    Returns the total number of panels in the control.

    Returns:

    number

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.getItemsCount();

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("getItemsCount");

}
}

    hide()

    Hides the visible Accordion control.

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.hide();

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("hide");

}
}

    refresh()

    The refresh method is used to adjust the control size based on the parent element dimension.

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.refresh();

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("refresh");

}
}

    removeItem(index)

    RemoveItem method is used to remove the specified index panel.It receives the parameter as number.

    Name Type Description
    index number specify the index value for remove the accordion panel.

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.removeItem(2);

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("removeItem", 2);

}
}

    show()

    Shows the hidden Accordion control.

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  var Object = $("#accordion").data("ejAccordion");
      Object.show();

}
}
  • HTML
    • <ej-accordion id="accordion" (create)="create()">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent {    
    constructor() {
    }
create() {

  $("#accordion").ejAccordion("show");

}
}

    Events

    activate

    Triggered after a Accordion item is active . Argument values are activeIndex, activeHeader, isInteraction and current model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    activeIndex number returns active index
    activeHeader object returns current active header
    isInteraction boolean returns true when the Accordion index activated by user interaction otherwise returns false

    Example

  • HTML
    • <ej-accordion id="accordion" (activate)="activate($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    activate(args) {
        //do the changes
    }
}

    ajaxBeforeLoad

    Triggered before the AJAX content is loaded in a content panel. Arguments have location of the content (URL) and current model value.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    URL string returns current AJAX content location

    Example

  • HTML
    • <ej-accordion id="accordion" (ajaxBeforeLoad)=" ajaxBeforeLoad($event)" ajaxSettings.type="GET" [ajaxSettings.cache]=false ajaxSettings.data={} ajaxSettings.dataType="html" ajaxSettings.contentType="html" [ajaxSettings.async]=true>
   <h3>
           <a href="../aspnet.html">ASP.NET</a></h3>
       <div>
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
     ajaxBeforeLoad(args) {
        //do the changes
    }
}

    ajaxError

    Triggered after AJAX load failed action. Arguments have URL, error message, and current model value.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    URL string returns current AJAX content location
    data string returns the failed data sent.

    Example

  • HTML
    • <ej-accordion id="accordion" (ajaxError)=" ajaxError($event)" ajaxSettings.type="GET" [ajaxSettings.cache]=false ajaxSettings.data={} ajaxSettings.dataType="html" ajaxSettings.contentType="html" [ajaxSettings.async]=true>
   <h3>
           <a href="../aspnet.html">ASP.NET</a></h3>
       <div>
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
     ajaxError(args) {
        //do the changes
    }
}

    ajaxLoad

    Triggered after the AJAX content loads. Arguments have current model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    URL string returns the name of the URL

    Example

  • HTML
    • <ej-accordion id="accordion" (ajaxLoad)=" ajaxLoad($event)" ajaxSettings.type="GET" [ajaxSettings.cache]=false ajaxSettings.data={} ajaxSettings.dataType="html" ajaxSettings.contentType="html" [ajaxSettings.async]=true>
   <h3>
           <a href="../aspnet.html">ASP.NET</a></h3>
       <div>
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
     ajaxLoad(args) {
        //do the changes
    }
}

    ajaxSuccess

    Triggered after AJAX success action. Arguments have URL, content, and current model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    URL string returns current AJAX content location
    data string returns the successful data sent.
    content string returns the AJAX content.

    Example

  • HTML
    • <ej-accordion id="accordion" (ajaxSuccess)=" ajaxSuccess($event)" ajaxSettings.type="GET" [ajaxSettings.cache]=false ajaxSettings.data={} ajaxSettings.dataType="html" ajaxSettings.contentType="html" [ajaxSettings.async]=true>
   <h3>
           <a href="../aspnet.html">ASP.NET</a></h3>
       <div>
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
     ajaxSuccess(args) {
        //do the changes
    }
}

    beforeActivate

    Triggered before a tab item is active. Arguments have active index and model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    activeIndex number returns active index
    isInteraction boolean returns true when the Accordion index activated by user interaction otherwise returns false

    Example

  • HTML
    • <ej-accordion id="accordion" (beforeActivate)="beforeActivate($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    beforeActivate(args) {
        //do the changes
    }
}

    beforeInactivate

    Triggered before a Accordion item is inactive. Argument values are inActiveIndex and model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    inActiveIndex number returns active index
    isInteraction boolean returns true when the Accordion index activated by user interaction otherwise returns false

    Example

  • HTML
    • <ej-accordion id="accordion" (beforeInActivate)="beforeInActivate($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    beforeInActivate(args) {
        //do the changes
    }
}

    create

    Triggered after Accordion control creation.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event

    Example

  • HTML
    • <ej-accordion id="accordion" (create)="create($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    create(args) {
        //do the changes
    }
}

    destroy

    Triggered after Accordion control destroy.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event

    Example

  • HTML
    • <ej-accordion id="accordion" (destroy)="destroy($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    destroy(args) {
        //do the changes
    }
}

    inActivate

    Triggered after a Accordion item is inactive. Argument values are inActiveHeader, inActiveIndex ,isInteraction and current model values.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the accordion model
    type string returns the name of the event
    inActiveIndex number returns active index
    inActiveHeader object returns in active element
    isInteraction boolean returns true when the Accordion index activated by user interaction otherwise returns false

    Example

  • HTML
    • <ej-accordion id="accordion" (inActivate)="inActivate($event)">
   <h3>
           <a href="#">ASP.NET</a></h3>
       <div>
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser.
       </div>
       <h3>
           <a href="#">ASP.NET MVC</a></h3>
       <div>
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications.
       </div>
       <h3>
           <a href="#">JavaScript</a></h3>
       <div>
JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.
       </div>
</ej-accordion>
  • TS
    • import { Component } from '@angular/core';

@Component({
  selector: 'ej-app',
  templateUrl: './default.component.html'
})
export class DefaultComponent { 
    inActivate(args) {
        //do the changes
    }
}