how to make accordion headers all collapsed initially on page load?

Question

I added this script on my page..it didnt work

    <script type="text/javascript">
    $(document).ready(function(){
      $("#accordion").accordion( { active: false, collapsible: true });
    });

my accordion

<cc1:Accordion ID="Accordion1" runat="server" FadeTransitions="true"  Visible="true" AutoSize="None"SelectedIndex="0" RequireOpenedPane="false"  TransitionDuration="250" 
HeaderCssClass="accordionHeader toggler" ContentCssClass="accordionContent expanded toggler">
                <HeaderTemplate>

                    <b style="color: Black">

                        <%#Eval("Ques")%>
                    </b>

                </HeaderTemplate>


                <ContentTemplate>
                <p> <%#DataBinder.Eval(Container.DataItem, "QuesAns")%></p>

                </ContentTemplate>
            </cc1:Accordion>

I see the first header expanded when page's loaded. How to make them all collapsed on page load?

Answer 1

There is an easy fix for that - just set SelectedIndex="-1" instead of "0" (plus RequireOpenedPane="false" but it's already set in your markup).. and you really don't need that fancy onReady script.