How to change default first display

[Krittikorn Deeraksa]

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]

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]

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]

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