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>