ejmAccordion

5 Jun 202324 minutes to read

The Essential JavaScript Mobile Accordion widget is an interface where lists of items are collapsed or expanded.

Custom Design for HTML Accordion control.

$(element).ejmAccordion()

Example

HTML

<!-- Unobtrusive way of rendering -->
<div id="accordion" data-role="ejmaccordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion();
        });
    </script>

Requires

• module:jQuery

• module:ej.core

• module:ej.unobtrusive

• module:ej.mobile.core

• module:ej.data

• module:ej.touch

Members

ajaxSettings Object

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

Default Value

• null

Example

HTML

<!-- Unobtrusive way of rendering -->
  <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true"
        data-ej-ajaxsettings-type="GET" data-ej-ajaxsettings-cache="false" data-ej-ajaxsettings-async="true" data-ej-ajaxsettings-datatype="html" data-ej-ajaxsettings-contenttype="html">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({
                enableAjax: true,
                ajaxSettings: {
                    type: 'GET',
                    cache: false,
                    async: true,
                    dataType: "html",
                    contentType: "html",
                    url: "",
                    data: {}
                }
            });
        });
    </script>

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.

collapseAll Boolean

Specifies whether the panels to be collapsible.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-collapseall="true">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisiticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ collapseAll: true });
        });
    </script>

cssClass String

Sets the root class for Accordion theme. This cssClass API helps to use custom skinning option for Accordion control. By defining the root class using this API, we need to include this root class in CSS.

Default Value:

• “”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-cssclass="customclass">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ cssClass: "customclass" });
        });
    </script>

disabledItems Array

Specifies the indices of the item to be disabled.

Default Value:

• []

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-disableditems="[1]">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ disabledItems: [1] });
        });
    </script>

enableAjax Boolean

Specifies whether to load the Ajax content while selecting the panel header.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({ enableAjax: true });
        });
    </script>

enableCache Boolean

Specifies whether to enable caching the content.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-enablecache="true">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({ enableAjax: true, enableCache: true });
        });
    </script>

enableMultipleOpen Boolean

Specifies whether to activate multiple content panels at a time.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-enablemultipleopen="true">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ enableMultipleOpen: true });
        });
    </script>

enablePersistence Boolean

Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-enablepersistence="true">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ enablePersistence: true });
        });
    </script>

enableRippleEffect Boolean

Specifies the ripple effect for the Accordion control. By default in android mode its value is true and other render mode we need to set as true.

Default Value:

• ej.isAndroid()?true:false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-enablerippleeffect="true">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ enableRippleEffect: true });
        });
    </script>

expandAll Boolean

To expand all the panel item.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-expandall="true">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ expandAll: true });
        });
    </script>

headerIcon

Specifies the accordion header icon.

headerIcon.active String

Specifies the accordion active mode header icon.

Default Value:

• “e-m-icon-up”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-headericon-active="e-m-icon-up">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ headerIcon: { active: "e-m-icon-up" } });
        });
    </script>

headerIcon.normal String

Specifies the accordion normal mode header icon.

Default Value:

• “e-m-icon-down”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-headericon-normal="e-m-icon-down">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>	
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ headerIcon: { normal: "e-m-icon-down" } });
        });
    </script>

heightAdjustMode Enum

Specifies the height style of the control. See heightAdjustMode

Default Value:

• “content”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-heightadjustmode="fill">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>	
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ heightAdjustMode: "fill" });
        });
    </script>

locale String

Change the Accordion text format based on given culture.

Default Value

• “en-US”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-locale="zh-CN">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

     <script>
            ej.mobile.Accordion.Locale["zh-CN"] = {
                spinnerText: "加载 "
            };
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

    <script>
           $("#accordion_loadondemand").ejmAccordion({enableAjax: true,locale:"zh-CN"})
            ej.mobile.Accordion.Locale["zh-CN"] = {
                spinnerText: "加载 "
            };
</script>

prefetchAjaxContent Boolean

Specifies whether to fetch the Ajax content initially.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-prefetchajaxcontent="true">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({ enableAjax: true, prefetchAjaxContent: true });
        });
    </script>

renderMode Enum

Changes the rendering mode of the accordion. SeeRenderMode

Default Value:

• auto

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-rendermode="auto">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ renderMode: "auto" });
        });
    </script>

selectedItems Array

Specifies the indices of items that need to be in active state or initialization.

Default Value:

• [0]

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-selecteditems="[1]">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ selectedItems: [1] });
        });
    </script>

showAjaxPopup Boolean

Specifies to show the waiting popup when loading the Ajax content.

Default Value:

• false

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-showajaxpopup="true">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({ enableAjax: true, showAjaxPopup: true });
        });
    </script>

showHeaderIcon Boolean

Specifies to show or hide the accordion header icon.

Default Value:

• true

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-showheadericon="false">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ showHeaderIcon: false });
        });
    </script>

spinnerText String

Specifies the ‘spinnerText’ while ajax content loading.

Default Value:

• “Loading…”

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-spinnertext="Waiting..." data-ej-enableajax="true">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>

    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({ spinnerText: "Waiting...", enableAjax: true })
        });
    </script>

Methods

addItem()

To add the panel items.

Example

HTML

<ul id="sample">
        <li data-ej-href="text1.html">Model-view-controller</li>
        <li data-ej-href="text2.html">WPF</li>
        <li data-ej-href="text3.html">WCF</li>
    </ul>
    <script>
        $(function () {
            $("#sample").ejmAccordion({ enableAjax: true });
            $("#sample").ejmAccordion("addItem", "<li data-ej-href='text2.html'>Other</li>", 2);
        })
    </script>

deselectItems()

To deSelect the panel items.

Example

HTML

<div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({ enableMultipleOpen: true });
            $("#accordion").ejmAccordion("deselectItems", [0]);
        });
    </script>

disableItems()

To disable the panel items.

Example

HTML

<div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion();
            $("#accordion").ejmAccordion("disableItems", [0]);
        });
    </script>

enableItems()

To enable the panel items.

Example

HTML

<div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion();
            $("#accordion").ejmAccordion("enableItems", [0]);
        });
    </script>

getItemsCount()

To get the panel items count.

Example

HTML

<div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion();
            $("#accordion").ejmAccordion("getItemsCount");
        });
    </script>

removeItem()

To remove the panel item.

Example

HTML

<ul id="sample">
        <li data-ej-href="text1.html">Model-view-controller</li>
        <li data-ej-href="text2.html">WPF</li>
        <li data-ej-href="text3.html">WCF</li>
    </ul>
    <script>
        $(function () {
            $("#sample").ejmAccordion({ enableAjax: true });
            $("#sample").ejmAccordion("removeItem", 1);
        })
    </script>

selectItems()

To select the panel items.

Example

HTML

<div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion();
            $("#accordion").ejmAccordion("selectItems", [1]);
        });
    </script>

Events

ajaxBeforeLoad

Event triggers before the Ajax contents load.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index text string Returns the spinner text url string Returns the active item URL item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-ajaxbeforeload="beforeLoad">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        function beforeLoad(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function (args) {
            $("#accordion_loadondemand").ejmAccordion({
                enableAjax: true,
                ajaxBeforeLoad: function (args) {
                    //handle the event
                }
            });
        });
    </script>

ajaxComplete

Triggers when the AJAX requests complete. The request may get failed or succeed.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index text string Returns the spinner text url string Returns the active item URL item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-ajaxcomplete="ajaxComplete">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        function ajaxComplete(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({
                enableAjax: true,
                ajaxComplete: function (args) {
                    //handle the event
                }
            });
        });
    </script>

ajaxError

Event triggers when the Ajax request failed.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index text string Returns the spinner text url string Returns the active item URL item object Returns the current active item textStatus string Return the status of the ajax loading.(like error) errorThrown string Return the type of error when loading the Ajax Data.

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-ajaxerror="ajaxError">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        function ajaxError(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({
                enableAjax: true,
                ajaxError: function (args) {
                    //handle the event
                }
            });
        });
    </script>

ajaxSuccess

Event triggers after the Ajax content loaded successfully.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index text string Returns the spinner text url string Returns the active item URL item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <ul id="accordion_loadondemand" data-role="ejmaccordion" data-ej-enableajax="true" data-ej-ajaxsuccess="ajaxSuccess">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        function ajaxSuccess(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <ul id="accordion_loadondemand">
        <li data-ej-text="Model-View-Controller" data-ej-href="text1.html"></li>
        <li data-ej-text="WPF" data-ej-href="text2.html"></li>
        <li data-ej-text="WCF" data-ej-href="text3.html"></li>
    </ul>
    <script>
        $(function () {
            $("#accordion_loadondemand").ejmAccordion({
                enableAjax: true,
                ajaxSuccess: function (args) {
                    //handle the event
                }
            });
        });
    </script>

collapse

Event triggers when the accordion items gets collapsed.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-collapse="onCollapse">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        function onCollapse(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({
                collapse: function (args) {                    
                    //handle the event
                }
            })
        });
    </script>

expand

Event triggers when the accordion items is expand.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-expand="onExpand">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        function onExpand(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({
                expand: function (args) {                    
                    //handle the event
                }
            })
        });
    </script>

itemTouchEnd

Event triggers when the touch end happens in the accordion items.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index string Returns the current selected item index item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-itemtouchend="touchEnd">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        function touchEnd(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({
                itemTouchEnd: function (args) {
                    //handle the event
                }
            })
        });
    </script>

itemTouchStart

Event triggers when the touch start happens in the accordion items.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index string Returns the current selected item index item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-itemtouchstart="touchStart">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        function touchStart(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({
                itemTouchStart: function (args) {
                    //handle the event
                }
            })
        });
    </script>

select

Event triggers when we select the accordion items.

Name	Type	Description
argument	Object	Event parameters from accordion Name Type Description cancel boolean Returns true if the event should be cancelled; otherwise, false. model string Returns the accordion model type string Returns the name of the event index int Returns the current selected item index item object Returns the current active item

Example

HTML

<!-- Unobtrusive way of rendering -->
    <div id="accordion" data-role="ejmaccordion" data-ej-select="onSelect">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        function onSelect(args) {
            //handle the event
        }
    </script>

HTML

<!-- Obtrusive way of rendering -->
    <div id="accordion">
        <ul>
            <li data-ej-text="Inbox">
                <div>
                    All WinRT controls are optimized for touch, supporting common gestures: zooming,
                    panning, selecting, double-tapping, rotating, resizing.
                </div>
            </li>
            <li data-ej-text="Sent">
                <div>
                    All the components in the ASP. NET MVC Essential Studio have been built from the
                    ground up with performance in mind and are extremely lightweight.
                </div>
            </li>
            <li data-ej-text="Trash">
                <div>
                    With our sophisticated Direct-Trac support system, built from the ground up to
                    support enterprise customers, you will have a streamlined experience working with
                    our support team.
                </div>
            </li>
        </ul>
    </div>
    <script>
        $(function () {
            $("#accordion").ejmAccordion({
                select: function (args) {
                    //handle the event
                }
            })
        });
    </script>