We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

How to change default first display

Thread ID:

Created:

Updated:

Platform:

Replies:

117535 Nov 4,2014 10:33 PM Nov 6,2014 08:42 AM JavaScript 3
loading
Tags: ejAccordion
Krittikorn Deeraksa
Asked On November 4, 2014 10:33 PM

I can  not find configure to

1. Open page with close all Accordion

2. Open page with default "only" open another tab without show first tab.

please advise
thank you

Attachment: Desktop_7bbe992b.zip

Harikrishnan P [Syncfusion]
Replied On November 5, 2014 02:22 AM

Hi Krittikorn,

Thanks for using Syncfusion products.

Query 1:  Open page with close all Accordion

To display the Accordion with all panels closed initially, we need to set the value of “collapsible” property as true. And we need to specify a negative index for the “selectedItemIndex” property as shown below.

   

  <script type="text/javascript">

        $(function () {

            // Initially set the "collapsible" property to true and specify negative value for the "selectedItemIndex" property to collapse all panels initally

           

            $("#basicAccordion").ejAccordion({

                collapsible: true,

                selectedItemIndex: -1

            });

        });

    </script>

 

 

The above code will make all the panels collapsed initially.

Query 2: Open page with default "only" open another tab without show first tab.

To open any other panel instead of the default panel, we need to use the property “selectedItemIndex”. Default value of this property is “0” so the first panel will be opened initially. If you want any other panel to be opened at the initial time means, then specify the index of that panel as the value for this property. Please refer the below code,

   

<script type="text/javascript">

        $(function () {

            // Specify the index of the header which needs to be open initially. Index starts from 0.

 

            //To open the third panel specify its index as shown below

            $("#basicAccordion").ejAccordion({

                collapsible: true,

                selectedItemIndex: 2

            });

        });

    </script>

 

 

You can refer the following link to know about the list of properties, methods and events supported by each components.

http://help.syncfusion.com/cr/js

You can find the getting started documentations and the “concepts and features” of each components in the following link

http://help.syncfusion.com/web

Please let us know if you have further queries.

Regards,

HariKrishnan


Krittikorn Deeraksa
Replied On November 5, 2014 12:20 PM

Thank you for your help

Sorry for Question 1.  I can do it that., but i can not edit posted.
<
div id="basicAccordion" ej-accordion e-enablemultipleopen="true" e-collapsible="true" e-selecteditemindex=-1>

But Question 2 Still not correct
<div id="basicAccordion" ej-accordion e-enablemultipleopen="true" e-collapsible="true" e-selecteditemindex=2>

It still open first tab but i don't want it (see picture)

Attachment: accordion_939a3417.zip

Harikrishnan P [Syncfusion]
Replied On November 6, 2014 08:42 AM

Hi Krittikorn,

Sorry for the inconvenience caused.

We are able to reproduce the reported issue (“first panel is shown always”). It occurs if “enableMultipleOpen” property is enabled. We have confirmed this as a defect and an issue report has been logged for this. Fix for this issue will be available in our upcoming service pack release for JavaScript which is expected to be rolled out at the end of this month.

We have achieved your requirement using the following workaround solution.

Initially close all the panels. Then show the required panel by setting the value for “selectedItemIndex” property using the “option” method. Please refer the below code.

   

   <script type="text/javascript">

        var accObj;

        //Initially close all the panels

        $(function () {

            $("#basicAccordion").ejAccordion({

                collapsible: true,

                selectedItemIndex: -1,

                enableMultipleOpen: true

            });

            //Create object for accordion

            accObj = $("#basicAccordion").data("ejAccordion");

            //then set the value for "selectedIemIndex" using option method to open the required panel

            accObj.option("selectedItemIndex", 1);

        });

    </script>

 

 

If still you face any problems in hiding the default panel, please get back to us we will be happy to assist you.

Regards,

HariKrishnan


CONFIRMATION

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

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

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

;